这听起来很简单,但对我来说似乎充满挑战,但我没有找到解决此特定问题的解决方案。
任务:
我在顶部有一个适合屏幕宽度的图像,并且具有可变的高度,因此图像的长宽比不会改变。
在标题下方是另外两个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/

10-12 07:37
查看更多