Question

我正在尝试创建一个phpBB主题，但是我设置DIV的方式与设想该页面的方式一样。

这就是我要做的事。

这是我到目前为止所做的。

的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;
    }

这个问题是sidemenu DIV溢出到页面底部并创建一个滚动条。

我试过寻找一个解决方案，并且只是通过在sidemenu css中使用bottom:0px;设法让溢出消失了

但是这会将标题推向右侧，并将侧面菜单推向左上角..

http://imgur.com/LKk9VtF

我被困在这里，css给了我一个巨大的头痛啊哈哈。有人可以帮我解决一下吗？

非常感谢你！

Answer 1

您应该使用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>

CSS Div Layout拉伸以适合宽度和高度

1 个答案: