html - 将 <div> 拉伸(stretch)到父 <div> 的全高

标签 html css

有很多div block 。一个 parent ,左边的第二个(用于菜单),右边的第二个(用于文本)。如何将右内 block (左内 block 可以)拉伸(stretch)到父 block 的整个高度。它的父 block 具有最小高度:1100px

代码如下:

<div id="wrapctr">
    <div id="leftmenu"></div>
    <div class="rightcontent">
        //common div
        <div style="padding: 10px; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; background:white">
            // img div
            <div style="float: left; padding: 10px; text-align: center; width: 257px;"><img src="../img/1625.jpg" width="200"></div>
        </div>
    </div>
</div>

CSS

#wrapctr {
    width:80%;
    min-width: 700px;
    max-width: 1200px;
    background:#FFF;
    margin:0 auto;
    min-height:1100px;
    z-index:2;        
}

#leftmenu { 
    background: #FFF;
    float: left;
    width: 250px;
    list-style: none;
}
.rightcontent {
    background: #FFF; 
    margin-left: 255px; 
}

一页显示12张图片,三张连发。如果我用 height:100% 添加了 position:relativeabsolute 我的带有样式的 div 来自 rightcontent div

最佳答案

你应该给 wrapctr 相对位置 并绝对定位到您的公共(public) div 然后你可以给普通的div height 100%

关于html - 将 <div> 拉伸(stretch)到父 <div> 的全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44950257/

相关文章:

javascript - Jade javascript block (服务器端)

html - html输入框最多可以输入多少个字符?

JavaScript 获取表单中的图像 ID

Android Hybrid App Keyboard/Dropdown popup resize issue for offscreen navigation

javascript - SVG 图标只变形一次,不会变形回来

css - 使用 flex 使自动完成列表覆盖在其他元素上

javascript - 将背景图片设置为 100%

javascript - style.left 不会更新

html - python color entire pandas dataframe rows 基于列值

javascript - 仅使用 HTML、CSS 和 Javascript 进行视频编辑