Question

我找到了网站模板。

body {

    font: 10pt Arial, Helvetica, sans-serif;
    background: #54463d;
    margin: 0;
   }
   h2 {
    font-size: 1.1em;
    color: #752641;
    margin-bottom: 0;
   }
   #container {
    width: 500px;
    margin: 0 auto;
    background: #f0f0f0;
   }
   #header {
    background: #8fa09b;
    font-size: 24pt;
    font-weight: bold;
    color: #edeed5;
    padding: 5px;
   }
   #content {
    float: left;
    width: 329px;
    padding: 10px;
    border-right: 1px dashed #183533;
    background: #fff;
   }
   #content p {
    margin-top: 0.3em
   }
   #sidebar {
    float: left;
    width: 120px;
    padding: 10px;
   }
   #footer {
    background: #8fa09b;
    color: #fff;
    padding: 5px;
   }
   .clear { 
    clear: both;
   }

如果内容高度超过菜单高度，则可以正常工作： http://jsfiddle.net/R6MYH/1/ 但是，在另一种情况下，网站显示不正确： http://jsfiddle.net/a5SFM/

Answer 1

如下所述，对您的设计进行细微更改：

将ID 内容和侧边栏的div放入一个div中 float：left
从css #content 和 #sidebar

float：left

在css #content 和 #sidebar

display：table-cell

Live Demo 这适用于所有情况。

你的内部HTML看起来像：

<div style="float:left">
      <div id="content">
       <h2>Title</h2>
       <p>There is only one sentence.</p>
   </div>
   <div id="sidebar">
    <p><a href="#">Lorem ipsum</a></p>
    <p><a href="#">Dolor sit amet</a></p>
    <p><a href="#">There is at text. Not really!</a></p>
    <p><a href="#">Link 4</a></p>
   </div>
      </div>

优势：

使用display的主要优点：table-cell是你不必设置min-height。即使你的侧栏包含1px的高度也可以。
更加用户友好
兼容所有浏览器（即＆gt; 7）
你不必做任何额外的工作，比如javascript / jquery。

Answer 2

更通用的解决方案是使用JavaScript（jquery）

来实现它

将此脚本添加到您的文档

 $(document).ready(function () {
    $("#content").height($(window).height() - $("#header").height() - $("#footer").height() - 40);


});

这将使内容高度在所有情况下都与浏览器的窗口高度相同

不要忘记将其添加到标记内

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

请在此处查看：http://jsfiddle.net/basharmadi/Mqy7y/

Answer 3

在div内创建#container，并将#content和#sidebar放入其中。
然后使用float: left替换#content和#sidebar的css中的display: table-cell

像这样：http://jsfiddle.net/aneelkkhatri/a5SFM/6/
不使用min-height

Answer 4

尝试将此添加到#content：

min-height:300px;

这将＆＃34;延伸＆＃34;不管是什么，都要关注内容div。

Answer 5

尝试为内容div添加最小高度：

min-height: 200px;

下面：

   #content {
    float: left;
    width: 329px;
    padding: 10px;
    border-right: 1px dashed #183533;
    background: #fff;
    min-height: 200px;
   }

jsfiddle

使用float的站点模板

5 个答案: