gpt4 book ai didi

css - 100% Div 高度无滚动条

转载 作者:太空狗 更新时间:2023-10-29 13:42:21 24 4
gpt4 key购买 nike

我有一个两列布局:

<html>
<head></head>
<body>

<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>

我希望侧边栏和内容的高度均为 100%,但最顶部容器的最小高度应为 100%。

我试着用下面的 css 来解决它:

* {
margin: 0;
padding: 0;
}

html {
font-family: Georgia, serif;
color: #000; height:100%; min-height:100px;
}

body {
background: #fff; height:100%; min-height:100px; overflow:hidden;
}

#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}

#container {
position:relative;
width: 100%; height:100%;
margin: auto; background:blue;
}

#contentwrapper {
float:left;
background:red;
position: relative;
width: 700px; padding:0px; margin:0px;
height: auto;
}

#sidewrapper {
float:left;
position: relative;
width: 159px; height:100%;
padding:0px; margin:0px;
}

...但是由于标题的 23px 高度,我得到了一个滚动条。我尝试用 body 元素的 overflow:hidden 来解决它,但我不知道这是否是正确的解决方案。

有什么想法吗?

最佳答案

如果我在对问题的评论中提出的假设是正确的,那么 sidebar100% 高,最重要的是你有一个 23px 标题,使您的容器成为 100% + 23px 高。

将来你将在 css 中拥有 calc() http://hacks.mozilla.org/2010/06/css3-calc/ .这将解决您的问题。

现在,我猜你应该通过 javascript 计算侧边栏的高度(= 容器的高度 - 23px)。

关于css - 100% Div 高度无滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4274914/

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