这听起来很简单,但对我来说似乎充满挑战,但我没有找到解决此特定问题的解决方案。
任务:
我在顶部有一个适合屏幕宽度的图像,并且具有可变的高度,因此图像的长宽比不会改变。
在标题下方是另外两个div,它们应占据标题和屏幕底部之间的其余可用高度。
我发现了很多解决类似问题的解决方案,但是在这种情况下,标头的高度始终是固定的。
码:
<style>
html, body{
font-family: sans-serif;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.view-mainMenu{
background-color: white;
width: 100%;
height: 100%;
}
/*---------- Head ----------*/
.view-mainMenu #mainMenu-contiHead{
display: block;
width: 100%;
}
.view-mainMenu #mainMenu-header{
width: 100%;
}
/*---------- LeftSide ----------*/
.mainMenu-leftSide{
font-size: 1vw;
position: absolute;
width: 52.5%;
/* too much because position is absolute, height 100% == ScreenHeight */
height: 100%;
margin-left: 10%;
margin-right: 12.5%;
text-align: justify;
}
/*---------- RightSide ----------*/
.mainMenu-rightSide{
position: absolute;
right: 0;
width: 25%;
/* this is just a value that nearly matches the desired height */
height: 80%;
background-color: #666666;
}
</style>
</head>
<div class="view-mainMenu">
<div id="mainMenu-ContiHead">
<img id="mainMenu-header" src="res/img/WA_Start_neu.png">
</div>
<div class="mainMenu-leftSide"></div>
<div class="mainMenu-rightSide"></div>
</div>
用JS解决问题很简单,但是我尝试找到一种纯CSS解决方案,以使我的JS代码摆脱(我应该)通过CSS解决的样式问题。
编辑:
就像kisabelle正确注意到的那样,我的解释很糟糕,我试图上传布局的图像,但是我不允许这样做。也许这有助于了解场景
---------------------------------
| -------------图片--------- |高度取决于图片的长宽比
| --div1- || -------- div2 -------- | div1和div2应该填充高度
| ------- || -------------------- |在图片和屏幕底部之间
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
---------------------------------
最佳答案
给定div height: 100%
可以解决提供的标记问题。
#divToStretch{
width: 10%;
height: 100%
}
关于html - 使用动态标题高度将div拉伸(stretch)到底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32124307/