Fatal编程技术网
  • html/
  • Html CSS Div布局拉伸以适应宽度和高度

Html CSS Div布局拉伸以适应宽度和高度

html css

Html CSS Div布局拉伸以适应宽度和高度,html,css,overflow,Html,Css,Overflow,我正在尝试制作一个phpBB主题，但是我很难按照我预想的方式设置DIV 这就是我想要做的 （帮助理解的图像） 这就是我到目前为止所拥有的 index.html <body> <div id='container'> <div id='header'> </div> <div id='sidemenu'> </div> <div id='content'> <

我正在尝试制作一个phpBB主题，但是我很难按照我预想的方式设置DIV

这就是我想要做的

（帮助理解的图像）

这就是我到目前为止所拥有的

index.html

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

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

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

</body>
问题是sidemenu DIV溢出到页面底部并创建一个滚动条

我试着寻找一个解决方案，只通过使用
bottom:0px成功地消除了溢出

但这会将标题向右推，并将侧菜单推到左上角，如下所示



我被困在这里了，css让我非常头疼啊哈。有人能帮我解决吗


非常感谢你
 您应该使用
高度：calc（100%-50px）；顶部：50px用于您的侧菜单。运行下面的代码段



*{
填充：0px；
保证金：0px
}
#标题{
宽度：100%；
高度：50px；
背景色：#6FF；
}
html，body，#容器{高度：100%；}
#副菜单{
显示：块；
位置：绝对位置；
宽度：100px；
高度：计算（100%-50px）；
顶部：50px；
背景色：#6F6；
}


太漂亮了，谢谢！我不知道你可以在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;
    }