Question

这听起来非常简单，但对我来说这似乎很有挑战性，而且我找不到解决这个问题的方法。

任务：
我在顶部有一个适合屏幕宽度的图像，并且具有变量高度，因此图像的宽高比不会改变。在该标题下面还有两个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注意到的那样，我的解释很差，我试图上传布局的图像，但我不允许。也许这有助于理解一下情况

---------------------------------
| ------------- picture --------- | 高度取决于图片方面比率 | --div1- || -------- div2 -------- | div1和div2应填充高度
图片与屏幕底部之间的 | ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
| ------- || -------------------- |
---------------------------------

Answer 1

给出div height: 100%解决了提供标记的问题。

    #divToStretch{
       width: 10%;
       height: 100%
    }

使用动态标题高度

1 个答案: