DIV滚动预期

所以我正在这样的布局不工作：DIV滚动预期

<body> 
<div id="master"> 
    <div id="sidebar"> 
     <ul> 
      <li>TEST 1</li> 
      <li>TEST 2</li> 
     </ul> 
    </div> 
    <div id="main"> 
     <div id="content"> 
      <div> 
       <p>EXAMPLE TITLE</p> 
      </div> 
      <div> 
       <p>EXAMPLE DESCRIPTION</p> 
      </div> 
      <div id="list"> 
       <ol> 
        <li> 
         <p>TEST</p> 
        </li> 
        <li> 
         <p>TEST</p> 
        </li> 
        <li> 
         <p>TEST</p> 
        </li> 
        <li> 
         <p>TEST</p> 
        </li> 
        <li> 
         <p>TEST</p> 
        </li> 

       </ol> 
      </div> 
     </div> 
    </div> 
</div>

，你可以看到，我有一个标题，描述，然后元素的列表。滚动此列表可以发现最后一个元素无法触及。只是其中的几个，类似于标题和描述所占用的空间量。

我该如何解决这个问题？请注意，我不想使用固定高度，否则会很快修复。我希望这是响应式的，这就是为什么我使用高度：100％。我并不总是能确定标题和说明的文字大小或数量。

入住这拨弄所有元素和CSS http://jsfiddle.net/jWtQL/23/

来源

2014-02-07 nhenrique

你归你的CSS？ http://jsfiddle.net/jWtQL/26/ –

不，我不知道那是什么，谢谢！所以我想这会更好，然后重置浏览器的风格吧？ – nhenrique

我回答了:) .. –

我想在这里添加了太多的东西，第一个是你需要重新设置默认浏览器的风格。当你评论说，你不知道的是，使用CSS Reset Stylesheet或者如果你正在寻找把重点放在一般的，使用下面的代码片段就足以

* { 
    margin: 0; 
    padding: 0; 
}

其次，您使用height: 100%;的#content但你有上面的文字，也使用border和padding等属性加起来这些，所以你的元素将溢出视口，当你在html, body上使用overflow: hidden;时，你将无法看到文字。

那么，有什么解决方案？

使用calc()这里

Demo

#content { 
    display: block; 
    height: calc(100% - 50px); /* 50px approx of the content above 
            overflowed element */ 
    padding: 10px 20px; 
}

还要指出的是，当你在做网站的响应，却使用了下面的代码片段来改变默认的盒子模型，将强制元素在元素内计数border和padding而不是在外面计数。

* { 
    /* First two properties are for resets */ 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

来源

2014-02-07 12:23:39

This Works，thanks！我只是无法找到calc（）的任何跨浏览器解决方案，因为我需要支持ie7 +：/ – nhenrique

@nhenrique使用jquery和'.resize（）'以及'onready'会为你做类似的事情 –

I'我会去尝试一下！谢谢 – nhenrique

这是你必须做的事情：

#content { 
    display: block; 
    height: 70%; /* Change the height which is less than the parent div */ 
    padding: 10px 20px; 
}

fidlle

来源

2014-02-07 12:27:12 CodeMonk

谢谢，这一个也适用。我只需要现在玩媒体查询:) – nhenrique

回答

相关问题