DIV溢出外部容器上的可滚动Y轴

问题描述：

我想制作一个有两列的框。左栏应该有一个标题和可滚动的内容。当我向左列添加标题时，会将下一个元素向下推。我怎样才能使它与容器齐平？DIV溢出外部容器上的可滚动Y轴

查看我做的JSFIDDLE，因为很容易发现问题。

CSS

html, body{ 
    height: 100%; 
} 
#container{ 
    width:100%; 
    background-color: blue; 
    height: 400px; 
    padding: 5px; 
} 
#col1{ 
    width: 33.33%; 
    height: 100%; 
    background-color: red; 
    float:left; 
} 
#col2{ 
    float:left; 
    width: 66.66%; 
    background-color: yellow; 
    height:100%; 
} 
#scrollplease{ 
    overflow-y: scroll; 
    height: 100%; 
}

你是什么意思它是与容器 – RobertoNovelo

答

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
.Main { 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 

 
.Aside { 
 
    width: 200px; /* Any size */ 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    background: #02c39a; /* For demo */ 
 
} 
 

 
.Aside__header { 
 
    height: 120px; /* Any size */ 
 
    background: rgba(0,0,0,.2); /* For demo */ 
 
    overflow-y: hidden; 
 
} 
 

 
.Aside__content { 
 
    flex: 1; 
 
    background: rgba(255,255,255,.2); /* For demo */ 
 
    overflow-y: auto; 
 
} 
 

 

 
.Section { 
 
    flex: 1; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    background: #f0f3bd; /* For demo */ 
 
} 
 

 
.Section__header { 
 
    height: 120px; /* Any size */ 
 
    background: rgba(0,0,0,.2); 
 
    overflow-y: hidden; 
 
} 
 

 
.Section__content { 
 
    flex: 1; 
 
    background: rgba(255,255,255,.2); /* For demo */ 
 
    overflow-y: auto; 
 
}

<main class="Main"> 
 
    <aside class="Aside"> 
 
    <header class="Aside__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt augue et justo condimentum sollicitudin. Quisque eget justo enim. Duis faucibus enim vitae gravida aliquet. Cras rutrum laoreet felis, vel pellentesque dolor auctor varius. Fusce laoreet eu diam sit amet varius. Pellentesque mollis vehicula tempus. Maecenas iaculis, mi quis tincidunt auctor, nulla neque fermentum dolor, id finibus neque nulla et sem. Curabitur pretium neque ut lacus faucibus mollis. Aenean sed leo laoreet, suscipit ante nec, varius erat. Nulla varius rutrum mauris, nec semper libero egestas et. Fusce laoreet rutrum turpis sit amet ultricies. Nulla porttitor iaculis consectetur. Vivamus ultrices ornare eros vel rutrum. Nam ut pellentesque tortor. Morbi quis varius ligula. Praesent semper non massa nec lobortis. Phasellus faucibus blandit porttitor. Etiam sagittis ut tellus a tristique. Fusce dolor ex, laoreet non lectus in, dignissim ultricies tellus. Donec a nulla ac lorem ultrices ullamcorper sed id ante. Suspendisse efficitur posuere mattis. Nullam faucibus hendrerit laoreet. Ut malesuada suscipit lacus vitae blandit. Donec lobortis, sapien in bibendum molestie, orci tortor cursus urna, rutrum varius dui neque a arcu. Pellentesque a fermentum massa. Vestibulum id lectus vel massa vulputate pulvinar. Nulla ante ligula, aliquet sed condimentum at, euismod vel risus. Vivamus vitae aliquam ligula. Nullam dignissim vel felis eu dapibus. Cras at scelerisque lectus. Praesent eleifend sed diam sed gravida. Cras quis volutpat nisl, ut ullamcorper sem. Vivamus viverra mollis est, quis consequat elit porta sit amet. Proin quis accumsan leo. Phasellus neque dui, ullamcorper non magna non, vulputate vulputate nisi. Integer luctus sem sapien, at ultricies tellus aliquam tincidunt. Vivamus faucibus gravida dui, at efficitur nisi commodo eu. Suspendisse volutpat orci eget elit porttitor, sed pulvinar nibh fringilla. Maecenas risus elit, gravida id sem nec, bibendum mattis ante. Sed eleifend mollis iaculis. Cras tempor tellus eget luctus fringilla. Pellentesque vehicula purus ipsum, vitae condimentum dui suscipit vitae. Quisque blandit accumsan nunc non rhoncus. Duis faucibus imperdiet eleifend.</header> 
 
    <div class="Aside__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt augue et justo condimentum sollicitudin. Quisque eget justo enim. Duis faucibus enim vitae gravida aliquet. Cras rutrum laoreet felis, vel pellentesque dolor auctor varius. Fusce laoreet eu diam sit amet varius. Pellentesque mollis vehicula tempus. Maecenas iaculis, mi quis tincidunt auctor, nulla neque fermentum dolor, id finibus neque nulla et sem. Curabitur pretium neque ut lacus faucibus mollis. Aenean sed leo laoreet, suscipit ante nec, varius erat. Nulla varius rutrum mauris, nec semper libero egestas et. Fusce laoreet rutrum turpis sit amet ultricies. Nulla porttitor iaculis consectetur. Vivamus ultrices ornare eros vel rutrum. Nam ut pellentesque tortor. Morbi quis varius ligula. Praesent semper non massa nec lobortis. Phasellus faucibus blandit porttitor. Etiam sagittis ut tellus a tristique. Fusce dolor ex, laoreet non lectus in, dignissim ultricies tellus. Donec a nulla ac lorem ultrices ullamcorper sed id ante. Suspendisse efficitur posuere mattis. Nullam faucibus hendrerit laoreet. Ut malesuada suscipit lacus vitae blandit. Donec lobortis, sapien in bibendum molestie, orci tortor cursus urna, rutrum varius dui neque a arcu. Pellentesque a fermentum massa. Vestibulum id lectus vel massa vulputate pulvinar. Nulla ante ligula, aliquet sed condimentum at, euismod vel risus. Vivamus vitae aliquam ligula. Nullam dignissim vel felis eu dapibus. Cras at scelerisque lectus. Praesent eleifend sed diam sed gravida. Cras quis volutpat nisl, ut ullamcorper sem. Vivamus viverra mollis est, quis consequat elit porta sit amet. Proin quis accumsan leo. Phasellus neque dui, ullamcorper non magna non, vulputate vulputate nisi. Integer luctus sem sapien, at ultricies tellus aliquam tincidunt. Vivamus faucibus gravida dui, at efficitur nisi commodo eu. Suspendisse volutpat orci eget elit porttitor, sed pulvinar nibh fringilla. Maecenas risus elit, gravida id sem nec, bibendum mattis ante. Sed eleifend mollis iaculis. Cras tempor tellus eget luctus fringilla. Pellentesque vehicula purus ipsum, vitae condimentum dui suscipit vitae. Quisque blandit accumsan nunc non rhoncus. Duis faucibus imperdiet eleifend.</div> 
 
    </aside> 
 
    <section class="Section"> 
 
    <header class="Section__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt augue et justo condimentum sollicitudin. Quisque eget justo enim. Duis faucibus enim vitae gravida aliquet. Cras rutrum laoreet felis, vel pellentesque dolor auctor varius. Fusce laoreet eu diam sit amet varius. Pellentesque mollis vehicula tempus. Maecenas iaculis, mi quis tincidunt auctor, nulla neque fermentum dolor, id finibus neque nulla et sem. Curabitur pretium neque ut lacus faucibus mollis. Aenean sed leo laoreet, suscipit ante nec, varius erat. Nulla varius rutrum mauris, nec semper libero egestas et. Fusce laoreet rutrum turpis sit amet ultricies. Nulla porttitor iaculis consectetur. Vivamus ultrices ornare eros vel rutrum. Nam ut pellentesque tortor. Morbi quis varius ligula. Praesent semper non massa nec lobortis. Phasellus faucibus blandit porttitor. Etiam sagittis ut tellus a tristique. Fusce dolor ex, laoreet non lectus in, dignissim ultricies tellus. Donec a nulla ac lorem ultrices ullamcorper sed id ante. Suspendisse efficitur posuere mattis. Nullam faucibus hendrerit laoreet. Ut malesuada suscipit lacus vitae blandit. Donec lobortis, sapien in bibendum molestie, orci tortor cursus urna, rutrum varius dui neque a arcu. Pellentesque a fermentum massa. Vestibulum id lectus vel massa vulputate pulvinar. Nulla ante ligula, aliquet sed condimentum at, euismod vel risus. Vivamus vitae aliquam ligula. Nullam dignissim vel felis eu dapibus. Cras at scelerisque lectus. Praesent eleifend sed diam sed gravida. Cras quis volutpat nisl, ut ullamcorper sem. Vivamus viverra mollis est, quis consequat elit porta sit amet. Proin quis accumsan leo. Phasellus neque dui, ullamcorper non magna non, vulputate vulputate nisi. Integer luctus sem sapien, at ultricies tellus aliquam tincidunt. Vivamus faucibus gravida dui, at efficitur nisi commodo eu. Suspendisse volutpat orci eget elit porttitor, sed pulvinar nibh fringilla. Maecenas risus elit, gravida id sem nec, bibendum mattis ante. Sed eleifend mollis iaculis. Cras tempor tellus eget luctus fringilla. Pellentesque vehicula purus ipsum, vitae condimentum dui suscipit vitae. Quisque blandit accumsan nunc non rhoncus. Duis faucibus imperdiet eleifend.</header> 
 
    <div class="Section__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt augue et justo condimentum sollicitudin. Quisque eget justo enim. Duis faucibus enim vitae gravida aliquet. Cras rutrum laoreet felis, vel pellentesque dolor auctor varius. Fusce laoreet eu diam sit amet varius. Pellentesque mollis vehicula tempus. Maecenas iaculis, mi quis tincidunt auctor, nulla neque fermentum dolor, id finibus neque nulla et sem. Curabitur pretium neque ut lacus faucibus mollis. Aenean sed leo laoreet, suscipit ante nec, varius erat. Nulla varius rutrum mauris, nec semper libero egestas et. Fusce laoreet rutrum turpis sit amet ultricies. Nulla porttitor iaculis consectetur. Vivamus ultrices ornare eros vel rutrum. Nam ut pellentesque tortor. Morbi quis varius ligula. Praesent semper non massa nec lobortis. Phasellus faucibus blandit porttitor. Etiam sagittis ut tellus a tristique. Fusce dolor ex, laoreet non lectus in, dignissim ultricies tellus. Donec a nulla ac lorem ultrices ullamcorper sed id ante. Suspendisse efficitur posuere mattis. Nullam faucibus hendrerit laoreet. Ut malesuada suscipit lacus vitae blandit. Donec lobortis, sapien in bibendum molestie, orci tortor cursus urna, rutrum varius dui neque a arcu. Pellentesque a fermentum massa. Vestibulum id lectus vel massa vulputate pulvinar. Nulla ante ligula, aliquet sed condimentum at, euismod vel risus. Vivamus vitae aliquam ligula. Nullam dignissim vel felis eu dapibus. Cras at scelerisque lectus. Praesent eleifend sed diam sed gravida. Cras quis volutpat nisl, ut ullamcorper sem. Vivamus viverra mollis est, quis consequat elit porta sit amet. Proin quis accumsan leo. Phasellus neque dui, ullamcorper non magna non, vulputate vulputate nisi. Integer luctus sem sapien, at ultricies tellus aliquam tincidunt. Vivamus faucibus gravida dui, at efficitur nisi commodo eu. Suspendisse volutpat orci eget elit porttitor, sed pulvinar nibh fringilla. Maecenas risus elit, gravida id sem nec, bibendum mattis ante. Sed eleifend mollis iaculis. Cras tempor tellus eget luctus fringilla. Pellentesque vehicula purus ipsum, vitae condimentum dui suscipit vitae. Quisque blandit accumsan nunc non rhoncus. Duis faucibus imperdiet eleifend.</div> 
 
    </section> 
 
</main>

答

我相信问题可能是与#scrollplease高度。尝试玩高度。 80％似乎是一个开始演示的好地方。

#scrollplease{ 
    overflow-y: scroll; 
    height: 80%; 
}

你也可以用在h2和ul元素填充/利润率玩把一切一字排开。

这会导致滚动条去容器下面齐平。 – Elipzer

是的，你是对的，谢谢你指出。更新我的答案。 – wmeade

答

用户样式表或浏览器正在为您的h2和ul添加保证金。至少应该使用有限的css重置。

您还需要应对与列的高度和宽度在容器上的填充

我会做这样的事情：

h2 { 
margin: 0; 
} 
ul { 
margin: 0; 
} 
#container{ 
    width:100%; 
    border: 5px solid blue; 
    height: 400px; 
} 
#col1{ 
    width: 33%; 
    padding: 10px 0 10px 1%; 
    height: 380px; 
    background-color: red; 
    float:left; 
} 
.header{ 
    height: 15%; 
} 
#scrollplease{ 
    overflow-y: scroll; 
    height: 85%; 
} 
#col2{ 
    float:left; 
    padding: 10px 0 10px 1%; 
    height: 380px; 
    width: 65%; 
    background-color: yellow; 
}

看到这个JS Fiddle

时刻牢记[Box Model]（http://www.w3schools.com/css/css_boxmodel.asp）。您的尺寸，包括填充，边距和边框都会占据您的div和高度的大小，因此无法真正反应（至少在实践中很难）。 –

答

框的高度被设置为400px，并且滚动包装的高度被设置为100％（其变成400px）。即使在滚动框上方有一个标题，占据了〜75px，滚动包装的高度仍然保持在400px，但开始较低，因此延伸到包装的范围之外。

答

为了避免列表溢出容器，您只需在容器类上设置overflow:hidden即可。

$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>"); 
 
$(".row-list").append("<p>World</p>");

.container 
 
{ 
 
    height:20em; 
 
    width:20em; 
 
    overflow:hidden; 
 
} 
 

 
.col 
 
{ 
 
    height:100%; 
 
    float:left; 
 
} 
 

 
.row 
 
{ 
 
    height:3em; 
 
    clear:both; 
 
    overflow:hidden; 
 
} 
 

 
.row-list 
 
{ 
 
    clear:both; 
 
    height:calc(100% - 3em); 
 
    overflow-y:auto; 
 
} 
 

 
.green 
 
{ 
 
    background:green; 
 
} 
 

 
.blue 
 
{ 
 
    background:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t <div class="col green"> 
 
\t \t <div class="row"> 
 
\t \t \t <h1>Hello</h1> 
 
\t \t </div> 
 
\t \t <div class="row-list"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col blue"> 
 
\t \t <div class="row"> 
 
\t \t \t <h1>Hello</h1> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t <p>World</p> 
 
\t \t </div> 
 
\t </div> 
 
</div>

DIV溢出外部容器上的可滚动Y轴

相关推荐