Question

我正在尝试为所有现代浏览器提供css布局，并且很难。我不是css大师，但希望能引导我朝着正确的方向前进。我正在尝试获得类似于此one的布局，但其余部分的导航高度为100％，宽度为100％。见下面的布局图。

enter image description here

根据上面的链接，我有这个，但错过了100％的高度...

    .wrapper {
        width: 100%;
        border: 3px solid #666;
        overflow: hidden
    }

    .menu-vertical {
        width: 230px;
        float: left;
        padding: 10px;
        border: 2px solid #f0f
    }

    .mainContent {
        overflow: hidden;
        border: 2px solid #00f
    }
    .banner {
        background-color: red;
        height: 50px;
    }
    .contentBox {
        background-color: pink;
        height: 200px;
        margin: 20px;
    }


<div class="wrapper">
    <div class="menu-vertical">side</div>
    <div class="mainContent">
        <div class="banner">banner</div>
        <div class="contentBox">content</div>
    </div>
</div>

感谢任何帮助，谢谢你

Answer 1

这是代码：

<!DOCTYPE html>
<html>

<body>
  <div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0;  background-color:red;">Content</div>
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div>
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div>

</body>


</html>

div 100％宽度与其他div固定

1 个答案: