gpt4 book ai didi

html - CSS Div 布局拉伸(stretch)以适应宽度和高度

转载 作者:太空宇宙 更新时间:2023-11-04 12:54:14 25 4
gpt4 key购买 nike

我正在尝试制作一个 phpBB 主题,但无法按照我设想的页面方式设置 DIV。

这就是我想要做的。

http://imgur.com/n6eZbsT (有助于理解的图片)

这是我目前所拥有的。

index.html

<body>
<div id='container'>
<div id='header'>
</div>

<div id='sidemenu'>
</div>

<div id='content'>
</div>
</div>

</body>

css.css

 *{
padding: 0px;
margin: 0px
}

#header {
width:100%;
height:50px;
background-color:#6FF;
}

#sidemenu {
display: block;
position:absolute;
width:100px;
height:100%;
background-color:#6F6;
}

问题是侧边菜单 DIV 溢出到页面底部并创建了一个滚动条。

我已经尝试寻找解决方案,并且只能通过在 sidemenu css 中使用 bottom:0px; 来设法让溢出消失

但这会将标题推到右侧,将侧边菜单推到左上角,就像这样......

http://imgur.com/LKk9VtF

我卡在这里了,css让我很头疼啊哈哈。谁能帮我解决问题?

非常感谢!

最佳答案

你应该使用 height:calc(100% - 50px); top:50px; 用于您的侧边菜单。运行下面的代码段。

 *{
padding: 0px;
margin: 0px
}

#header {
width:100%;
height:50px;
background-color:#6FF;
}
html,body,#container{height:100%;}

#sidemenu {
display: block;
position:absolute;
width:100px;
height:calc(100% - 50px);
top:50px;
background-color:#6F6;
}
<div id='container'>
<div id='header'>
</div>

<div id='sidemenu'>
</div>

<div id='content'>
</div>
</div>

关于html - CSS Div 布局拉伸(stretch)以适应宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25954398/

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