我正在尝试在屏幕上容纳可滚动子区域的整个高度。当在添加填充(蓝线)时无需填充(到子区域)时,即使没有填充(蓝线),我也会收到以下不希望的溢出(红色交叉)。
我不明白为什么会出现此溢出,因为所有区域都可以滚动并设置为高度100%。
我希望content
div不显示滚动条,side
并main
使用内部填充显示100%的可用高度。
我尝试过的是:
有没有一种方法可以使其工作而不必在内部元素中设置填充或在外部元素上设置边距?
--->小提琴<---
款式
html, body {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-areas:
"a a a"
"b b c"
"b b c";
grid-template-columns: auto auto max-content;
grid-template-rows: max-content auto;
height: 100%;
overflow: auto;
}
.header {
grid-area: a;
text-align: center;
background-color: gold;
height: 50px;
}
.shortcut {
grid-area: c;
background-color: LightBlue;
}
.content {
grid-area: b;
display: grid;
grid-template-columns: 1fr 3fr;
height: 100%;
overflow: auto;
}
.side {
display: grid;
height: 100%;
overflow: auto;
gap: 32px;
padding: 32px; /* <---- IF I REMOVE PADDING HERE IT WILL WORK AS EXPECTED (EXCEPT I LOOSE THE PADDING) */
.sub-side {
display: grid;
height: 100%;
overflow: auto;
&.first {
background-color: LightGreen;
}
&.second {
background-color: LightCyan;
}
}
}
.main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
height: 100%;
overflow: auto;
padding: 32px; /* <---- IF I REMOVE PADDING HERE IT WILL WORK AS EXPECTED (EXCEPT I LOOSE THE PADDING) */
.list {
height: 100%;
overflow: auto;
}
.widgets {
display: grid;
height: 100%;
overflow: auto;
background-color: LightCoral;
}
}
.widgets {
> div {
height: 200px;
}
}
的HTML
<div class="container">
<div class="header"> Header </div>
<div class="shortcut">
<div>shrtct 1</div>
<div>shrtct 2</div>
<div>shrtct 3</div>
<div>shrtct 4</div>
<div>shrtct 5</div>
<div>shrtct 6</div>
<div>shrtct 7</div>
<div>shrtct 8</div>
<div>shrtct 9</div>
</div>
<div class="content">
<div class="side">
<div class="sub-side first">
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
</div>
<div class="sub-side second">
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
<div>Side 1</div>
<div>Side 2</div>
<div>Side 3</div>
<div>Side 4</div>
<div>Side 5</div>
</div>
</div>
<div class="main">
<div class="list">
<div>List item 1</div>
<div>List item 2</div>
<div>List item 3</div>
</div>
<div class="widgets">
<div>
Widget 1
</div>
<div>
Widget 2
</div>
<div>
Widget 2
</div>
</div>
</div>
</div>
</div>
在.main
和.side
从100%改变你的高度height:auto;
,它应该给你你想要的结果。
小提琴:https : //jsfiddle.net/caq8ojs9/
或者你也可以简单地改变你overflow: auto;
要overflow: hidden;
在.content
谢谢!!!raah
height: auto
简单而又高效+1