#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Вот моя скрипка
Я пытаюсь сделать div высотой 100%, а также он должен быть прокручиваемым, когда в этом конкретном div больше содержимого.
Я использую свойства flex, но мой код не работает должным образом — он не прокручивается, когда содержимое превышает высоту div.
body {
font-family: 'arial';
}
header,
footer {
background: #333;
height: 30px;
color: #fff;
}
img {
width: 100%;
}
.wrapper {
bottom: 0;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
position: relative;
top: 0;
width: 100%;
background: #ccc;
}
.content {
height: 100%;
width: 100%;
-webkit-box-flex: 2;
/* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 2;
/* OLD - Firefox 19- */
-webkit-flex: 2;
/* Chrome */
-ms-flex: 2;
/* IE 10 */
flex: 2;
/* NEW, Spec - Opera 12.1, Firefox 20 */
}
.content .inner_content {
display: table;
width: 100%;
height: 100%;
}
.content .inner_content .left_content {
display: table-cell;
background: yellow;
width: 50%;
padding: 10px;
}
.content .inner_content .right_content {
display: table-cell;
background: green;
width: 60%;
padding: 10px;
}
.scrollable-content {
background: #ddd;
padding: 10px;
}
<div class="wrapper">
<header>this is header</header>
<div class="content">
<div class="inner_content">
<div class="left_content">
<div class="image">
<img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="">
</div>
<div class="scrollable-content">
<h1>I am trying to do:</h1>
<h3>1) make these gray div height 100% till bottom</h3>
<h3>2) When content is more then this gray div should be scrollable or else not</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="right_content">
<img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="">
</div>
</div>
</div>
<footer>this is footer</footer>
</div>
Ответ №1:
Как вам это?
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
display: flex;
max-height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
max-height: 100%;
width: 100%;
overflow: hidden;
}
header {
background: grey
}
main {
display: flex;
flex-direction: row;
flex: 1;
background: blue
}
.column {
width: 50%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
}
.column:first-child {
background: yellow;
}
.column:last-child {
background: green;
}
.image-holder {
margin-bottom: 10px;
background: orange;
min-height:1%;
}
.image {
width: 100%;
display: block;
height: auto;
}
.scrollable-content {
flex: 1;
background: grey;
position: relative;
height: 10px;
}
.firefox-scroller {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: auto;
padding: 20px;
box-sizing:border-box;
}
<div class="wrapper">
<header>header</header>
<main>
<div class="column">
<div class="image-holder">
<img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image">
</div>
<div class="scrollable-content">
<div class="firefox-scroller">
<h1>I am trying to do:</h1>
<h3>1) make these gray div height 100% till bottom</h3>
<h3>2) When content is more then this gray div should be scrollable or else not</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
<div class="column">
<div class="image-holder">
<img src="http://l7.alamy.com/zooms/19704c162b4446c984a50bfdb49b45ac/a-colour-image-taken-on-a-cloudy-dawn-of-the-town-of-saint-malo-from-g1k27a.jpg" alt="" class="image">
</div>
</div>
</main>
<footer>this is footer</footer>
</div>
Комментарии:
1. Что, если будет больше контента, будет ли он прокручиваться
2. спасибо за усилия, но когда содержимое больше, оно не прокручивается. серый div должен быть scrool
3. Я сделал, но нет, он не прокручивается, можете ли вы дать мне свежий jsfiddle
4. извините, только что протестировал в firefox, и это не работает — дайте мне поиграть
5. куда делся нижний колонтитул : (
Ответ №2:
Я не уверен, что это тот эффект, который вы хотите получить, но попробуйте добавить ‘overflow’ в это определение div CSS, например:
.scrollable-content{
background:#ddd;
padding:10px;
overflow: auto; max-height: 100%;
}
(Я попробовал в скрипте, и он добавляет прокрутку, это та прокрутка, которую вы хотели бы получить?)
Ответ №3:
Насколько я понимаю ваши мысли, я думаю, вы пытаетесь получить фиксированную высоту для вашего div, и если содержимое больше, вы хотите, чтобы оно помещалось внутри div.
Вы можете использовать фиксированную высоту для вашего div, а также можете использовать свойство css overflow для получения прокручиваемого содержимого.
Итак, я думаю, что ваше решение может быть следующим —
.scrollable-content{
background:#ddd;
padding:10px;
height: (your desired height goes here);
overflow:scroll;
}
Комментарии:
1. высота должна регулироваться снизу, поэтому я не могу добавить высоту в пикселях или процентах
2. В этом случае, я думаю, вы можете использовать свойство CSS calc(). ссылка Надеюсь, это поможет 🙂
Ответ №4:
Вам нужно установить максимальную высоту вашего прокручиваемого контейнера.
max-height: 100%;
Тогда вы должны сказать, что хотите, чтобы вертикальное переполнение было прокручиваемым:
overflow-y: scroll;