我无法将div高度设为100%&在CSS中可滚动 [英] I am not able to make div height 100% & scrollable in CSS
本文介绍了我无法将div高度设为100%&在CSS中可滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的小提琴
我正在尝试使div的高度为100%,并且当该特定div中包含更多内容时,它应该可以滚动.
I am trying to make div of 100% height and also it should be scrollable when there is more content in that particular div.
我正在使用flex属性,但是我的代码无法正常工作-当内容超过div高度时,它不会滚动.
I am using flex properties but my code not working properly - it doesn't scroll when the content is more than the div height.
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>
推荐答案
这对您来说怎么样?
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>
这篇关于我无法将div高度设为100%&在CSS中可滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文