CSS布局(div高度)

我想我的问题很简单，但我不知道我的样式表出了什么问题。

我想设计我的网站布局如下。

https://i.stack.imgur.com/8Nkw5.jpg

我可以通过这个来实现。

CSS

#wrapper {
    width: 800px;
    background-color: White;
    margin: 0 auto;
    background-color: White;
}
#header {
    width: 100%;
    height: 100px;
    background-color: Blue;
}
#global_nav {
    width: 100%;
    height: 40px;
    background-color: Orange;
}
#content {
    width: 100%;
    height: 300px;
}
#local_nav {
    width: 200px;
    height: 300px;
    float: left;
    background-color: green;
}
#main {
    width: 580px;
    height: 100%;
    height: 300px;
    float: right;
    background-color: lime;
}
#footer {
    background-color: Gray;
    width: 100%;
    height: 80px;
}

HTML

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
            Header
        </div>
        <div id="global_nav">
            Navigation Bar
        </div>
        <div id="content">
            <div id="local_nav">
                Side Bar
            </div>
            <div id="main">
                Main Content
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>
</body>
</html>

然而，由于我的网站是动态的，主要内容中的信息来自数据库，所以高度也需要动态。我试图删除content或main中的"height:300px；"，但未能保持相同的设计。代码出了什么问题？

谢谢你的帮助。

像这个

演示

CSS

   html,body{
    height:100%;
   }
    #content {
        width: 100%;
        height: 100%;
        display:table;
    }
    .local_nav {
        width: 200px;
        display:table;
        float: left;
        background-color: green;
        height:100%;
    }
    .main {
        width: 580px;
        float: right;
        background-color: lime;
        height:100%;
    }

HTML

<div id="wrapper">
  <div id="header"> Header </div>
  <div id="global_nav"> Navigation Bar </div>
  <div id="content">
    <div class="local_nav"> Side Bar<br/>
      Side Bar<br/>
      Side Bar<br/>
      Side Bar<br/>
      Side Bar<br/>
      Side Bar<br/>
      Side Bar<br/>
    </div>
    <div class="main"> Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
      Main Content<br/>
    </div>
  </div>
  <div id="footer"> Footer </div>
</div>

您必须使用：

height:auto;
overflow:hidden;

在#main中，它根据内容调整高度，对于侧栏，我认为你需要使用人造柱。

试试这个

CSS

html, body {
    height: 100%;
    margin:0px;
}
#wrapper {
    width: 800px;
    height:100%;
    margin: 0 auto;
    background-color: White;
}
#header {
    width: 100%;
    height: 100px;
    background-color: Blue;
}
#global_nav {
    width: 100%;
    height: 40px;
    background-color: Orange;
}
#content {
    width: 100%;
    height: calc(100% - 220px);
    height: -webkit-calc(100% - 220px);
    height: -moz-calc(100% - 220px);
    height: -ms-calc(100% - 220px);
    height: -o-calc(100% - 220px);
}
#local_nav {
    width: 200px;
    height: 100%;
    float: left;
    background-color: green;
}
#main {
    width: 580px;
    height: 100%;
    height: 100%;
    float: right;
    background-color: lime;
}
#footer {
    background-color: Gray;
    width: 100%;
    height: 80px;
}

现场演示：http://jsfiddle.net/nandhakumarsri9/zAcAr/

相关内容

最新更新

热门标签：