gpt4 book ai didi

html - CSS:3 列高度 100%

转载 作者:行者123 更新时间:2023-11-28 18:47:56 25 4
gpt4 key购买 nike

这是一个示例页面:

http://jsfiddle.net/SkeLLLa/pwfH2/

我想为 content 类设置 100% 的高度(参见 CSS 源代码中的“这里的问题”注释),但是当我这样做时,左右两列(嵌套在 content div) 变为 0px 高度。但是当 content 以像素为单位设置高度时,它工作正常。

有没有不用 JavaScript 的解决方案?

最佳答案

对列使用 display: inline-block,对 htmlbody 使用 height:100%标签:

    <!doctype html>
<html>
<head>
<style>
html, body, #content, #left, #right, #center { height: 100%; }
#content { width: 100%; }
#left, #center, #right { display:inline-block; }
#left, #center, #right { width: 32%; border: 1px solid red; }

/* media query for IE 6-7 */
@media,
{
#left, #center, #right { display:inline; }
}
</style>
</head>
<body>
<div id="content">
<div id="left">foo</div>
<div id="center">bar</div>
<div id="right">baz</div>
</div>
</body>
</html>

关于html - CSS:3 列高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10086007/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com