Question

我有两个滚动的div（红色轮廓），不会滚动到各自的底部。我似乎无法弄清楚要修改它的内容。

粗轮框是模拟的浏览器窗口。

enter image description here

HTML

<div class="container">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="main">
        <div class="detail-container">
            <div class="top-info"></div>
            <div class="items-container">
                <div class="item blue"></div>
                <div class="item orange"></div>
                <div class="item blue"></div>
                <div class="item orange"></div>
            </div>
        </div>
        <div class="main-container">
            <div class="main-header"></div>
            <div class="main-content">
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
    height: 500px;
    width: 500px;
    border: solid 3px black;
    overflow: hidden;
}

.header {
    height: 25px;
    background-color: #333;
    right: 0;
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75px;
    margin-top: 35px;
    border: solid 1px grey;
}

.main {
    height: 100%;
    padding-left: 75px;
}

.main-container {
    width: 65%;
    height: 100%;
}

.main-content {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.main-header {
    height: 20px;
    border: 1px solid black;
}

.detail-container {
    float: right;
    width: 35%;
    height: 100%;
    border: solid 1px grey;
}

.top-info {
    padding: 75px 0;
}

.items-container {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.item {
    padding: 100px 0;
} 

.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }

.content {
    width: 65%;
    height: 100%;
}

Answer 1

容器的高度固定，溢出设置为隐藏。由于div超过了那个高度，因此无法看到溢出。

试试这个：

＆＃13;

.container {
    height: 500px;
    width: 500px;
    border: solid 3px black;
    overflow: scroll;
}

.header {
    height: 25px;
    background-color: #333;
    right: 0;
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75px;
    margin-top: 35px;
    border: solid 1px grey;
}

.main {
    height: 100%;
    padding-left: 75px;
}

.main-container {
    width: 65%;
    height: 100%;
}

.main-content {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.main-header {
    height: 20px;
    border: 1px solid black;
}

.detail-container {
    float: right;
    width: 35%;
    height: 100%;
    border: solid 1px grey;
}

.top-info {
    padding: 75px 0;
}

.items-container {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.item {
    padding: 100px 0;
} 

.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }

.content {
    width: 65%;
    height: 100%;
}

＆＃13;

<div class="container">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="main">
        <div class="detail-container">
            <div class="top-info"></div>
            <div class="items-container">
                <div class="item blue"></div>
                <div class="item orange"></div>
                <div class="item blue"></div>
                <div class="item orange"></div>
            </div>
        </div>
        <div class="main-container">
            <div class="main-header"></div>
            <div class="main-content">
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

我可以用一些javascript来解决这个问题。只要标记结构没有改变，这应该会增加到其他块的任何内容大小。

祝你好运！

$(function(){
//creating vars based on jquery objects
$itemsContainer = $('.items-container');
$mainContent = $('.main-content');

$container = $('.container');
$header = $('.header');
$mainHeader = $('.main-header');    

//calculating heights
var containerH = $container.height();    
var headerH = $header.height();    
var mainHeaderH = $mainHeader.height();

//assigning new height to main-content class
$mainContent.css("height", (containerH - headerH - mainHeaderH) + "px");

//similar operation for items-container
//creating vars based on jquery objects
$topInfo = $('.top-info');

//calculating heights
var topInforH = $topInfo.outerHeight(); //since in your example top-info has no content only padding, you will need to use the method outerHeight instead of height

//assigning new height to main-content class
$itemsContainer.css("height", (containerH - headerH - topInforH) + "px"); });

顺便说一下，我用我的解决方案更新了你的jsfiddle，所以你可以测试它。

Answer 3

当您使用100％的高度时，无论其他兄弟元素如何，它都会将其设置为全高。因此它们处于父元素的100％，但随后标题将它们推下来。您必须在所有元素上使用固定高度。或者将一个设置为20％，将其他设置为80％等。

.main-content { width: 452px; }
.items-container {width: 352px; }

滚动div不会滚动到内容的底部

3 个答案: