Html css桌面上的100%高度_Html_Css_Height_Css Tables

Html css桌面上的100%高度

html css

Html css桌面上的100%高度,html,css,height,css-tables,Html,Css,Height,Css Tables,我试图使流体布局，没有固定的高度或宽度元素。我的页面主体分为三列，因为我希望它们的高度都相等，所以我决定使用css表。但是，当我尝试向表div或表单元格div添加100%高度属性时，它们不会扩展到div.middle的完整大小。我已经用完整的代码对这个问题进行了JS处理，但这里有一个片段： <body> <div class='titleBar'> <div class='wrap'> <img src='

我试图使流体布局，没有固定的高度或宽度元素。我的页面主体分为三列，因为我希望它们的高度都相等，所以我决定使用css表。但是，当我尝试向表div或表单元格div添加100%高度属性时，它们不会扩展到div.middle的完整大小。我已经用完整的代码对这个问题进行了JS处理，但这里有一个片段：

<body>
    <div class='titleBar'>
        <div class='wrap'>
            <img src='../images/logo.png' />
        </div>
    </div>
    <div class='middle'>
        <div class='wrap mainContent'>
                <div class='leftColumn'>left here</div>
                <div class='center'>center</div>
                <div class='rightColumn'>right</div>
        </div>
    </div>
    <div class='footerBar'><div class='wrap'>footer</div></div>
</body>

尝试添加高度：200px；使满足

div.mainContent {
display: table;
height: 200px;
}

对于代码

加高度：100%；也应该有效

你的问题不在于栏目没有完全伸展，而在于主要内容没有完全伸展

编辑：好的，所以当你尝试使你的容器成为流体时，真正的问题来了，因为对于浏览器来说，高度比宽度更难计算

如果在父元素未设置高度的元素上设置了百分比高度，则会出现此问题。换句话说，父元素具有默认高度：auto；。实际上，您要求浏览器根据未定义的值计算高度。因为这将等于一个空值，所以结果是浏览器什么也不做

为了将div的高度定义为相对高度，还必须设置父元素的高度

通过增加高度：100%到.middle，你可以得到接近你想要的东西

阅读有关高度问题的更多信息。