Question

所以我正在研究这样的布局：

<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/

Answer 1

这就是你要做的事情：

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

<强> fidlle

Answer 2

我想在这里添加太多东西，首先是你需要重置默认的浏览器样式。正如你评论说你没有意识到这一点，使用CSS Reset Stylesheet或者如果你想关注一般的那些，使用下面的代码就足够了

* {
   margin: 0;
   padding: 0;
}

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

那么，解决方案是什么？

在这里使用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;
}

div滚动不按预期工作

2 个答案: