0

我认为我的问题会很简单，但我无法弄清楚我的样式表有什么问题。

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

http://i.imgur.com/3K33P8O.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>

但是，由于我的网站是动态的，主要内容中的信息来自数据库，因此高度也需要是动态的。我试图删除“高度：300px；” 在内容或主要方面，但我未能保持相同的设计。代码有什么问题？

谢谢你的帮助。

4

3 回答 3

0

你必须使用：

height:auto;
overflow:hidden;

在#main 中，它会根据内容和侧边栏调整其高度，我认为您需要使用人造列。

于 2013-08-24T08:02:31.117 回答
0

像这样

演示

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>
于 2013-08-24T08:10:02.640 回答
0

试试这个

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/

于 2013-08-24T09:33:02.273 回答