1. 首頁
  2. 問答
  3. DIV溢出外部容器上的可滾動Y軸

DIV溢出外部容器上的可滾動Y軸

2015-11-19 112 views
-1

我想製作一個有兩列的框。左欄應該有一個標題和可滾動的內容。當我向左列添加標題時，會將下一個元素向下推。我怎樣才能使它與容器齊平？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%; 
}

來源

2015-11-19 Dot Batch

+0

你是什麼意思它是與容器 – RobertoNovelo

回答

0 

*, 
 
*: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>

來源

2015-11-20 03:04:12 0x860111

0

我相信問題可能是與#scrollplease高度。嘗試玩高度。 80％似乎是一個開始演示的好地方。

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

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

來源

2015-11-19 23:21:32 wmeade

+1

這會導致滾動條去容器下面齊平。 – Elipzer

+0

是的，你是對的，謝謝你指出。更新我的答案。 – wmeade

0

用戶樣式表或瀏覽器正在爲您的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

來源

2015-11-20 01:41:21

+0

時刻牢記[Box Model]（http://www.w3schools.com/css/css_boxmodel.asp）。您的尺寸，包括填充，邊距和邊框都會佔據您的div和高度的大小，因此無法真正反應（至少在實踐中很難）。 –

0

框的高度被設置爲400px，並且滾動包裝的高度被設置爲100％（其變成400px）。即使在滾動框上方有一個標題，佔據了〜75px，滾動包裝的高度仍然保持在400px，但開始較低，因此延伸到包裝的範圍之外。

來源

2015-11-20 02:35:47

0

爲了避免列表溢出容器，您只需在容器類上設置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>

來源

2015-11-20 02:42:43 RobertoNovelo

相關問題

 相關問題