Gui*_*meS 37 html css scrollbar
我有这个HTML结构:
<div id="body">
<div id="head">
<p>Dynamic height without scrollbar</p>
</div>
<div id="content">
<p>Dynamic height with scrollbar</p>
</div>
<div id="foot">
<p>Fixed height without scrollbar</p>
</div>
</div>
我希望主要部分(#body)中的三个部分没有溢出.所以我需要一个中间部分的滚动条.
我试过这个CSS:
#content{
border: red solid 1px;
overflow-y: auto;
}
还有这个:
#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}
但它们都不起作用.
我在JSFiddle上做了一个例子.
我只能用CSS和HTML做到这一点吗？我宁愿避免使用Javascript.
mty*_*aka 51
Flexbox是一种现代替代方案,可让您在没有固定高度或JavaScript的情况下执行此操作.
设置display: flex; flex-direction: column;在容器上,并flex-shrink: 0;在页眉和页脚的div的伎俩:
http://jsfiddle.net/cvmrvfhm/1/
小智 15
我有 PrimeNG p_Dialog 内容的类似问题，我通过以下样式修复了 contentStyle
height: 'calc(100vh - 127px)'
你必须指定一个固定的高度,你不能使用100%,因为没有什么可以比较,如height=100%什么？
编辑小提琴:
小智 5
<div id="scroll">
<p>Try to add more text</p>
</div>
这是 css 代码
#scroll {
overflow-y:auto;
height:auto;
max-height:200px;
border:1px solid black;
width:300px;
}
这是演示JSFIDDLE
小智 5
扩展@mtyaka使用flexbox的答案，如果你的滚动条在dom深处，需要对所有父元素使用overflow: auto/hidden，直到我们得到固定的高度
jsfiddle https://jsfiddle.net/rohilaharsh/cuazdnkh/1/
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Container</title>
</head>
<body>
<div class="one">
One
<div class="two">
Two
<div class="three">
Three
<div class="table">
Table
<div class="header">Table Header</div>
<div class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure maiores corporis quisquam enim at nam earum non atque dolorum nulla quidem perferendis, porro eveniet! Quisquam, fugit ex aspernatur, aliquid necessitatibus amet aperiam pariatur facilis suscipit ea dolorum qui ratione assumenda eum minima. At a ullam magnam eveniet, hic sit quis dicta perferendis excepturi nemo voluptate ipsum doloremque expedita illo dolor voluptates culpa consequuntur quaerat porro reprehenderit ab alias! Maxime reprehenderit nihil doloribus exercitationem, cupiditate quasi dolorum voluptas repellendus vel fugit incidunt praesentium molestias modi numquam! Quo porro laudantium aperiam suscipit, molestiae quibusdam veniam cum nam fuga facere fugit quisquam distinctio!</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
html {
height: 100%;
}
html, body, .one,.two,.three,.table {
display: flex;
flex-direction: column;
/* important */
overflow: hidden;
flex: 1;
margin: 0;
}
.body {
width: 200px;
overflow: auto;
}
| 归档时间： |
|
| 查看次数： |
71393 次 |
| 最近记录： |