-5

我正在尝试为所有现代浏览器提供一个 CSS 布局，并且遇到困难。我不是 css 大师，但希望有人能引导我朝着正确的方向前进。我正在尝试获得与此类似的布局，但左侧导航的高度为 100%，其余部分的宽度为 100%。请参见下面的布局图像。

在此处输入图像描述

根据上面的链接，我有这个，但缺少 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>

任何帮助表示赞赏，谢谢

4

1 回答 1

0

这是代码：

<!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>
于 2013-10-21T13:13:39.870 回答