jsFiddle.component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; /* display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; */}.component-container .grid-container-1 { display: grid; grid-template-columns: 150px 1fr 1fr; grid-template-rows: 50px 1fr 50px; grid-gap: 3px; padding: 3px; height: 100%; width: 100%; background-color: #2196F3;}.component-container .grid-container-1 .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid darkblue; overflow: auto;}.component-container .grid-container-1 .grid-header { grid-column: 1/span 3; grid-row: 1;}.component-container .grid-container-1 .grid-nav { grid-column: 1; grid-row: 2/span 1;}.component-container .grid-container-1 .grid-content-left { grid-column: 2; grid-row: 2;}.component-container .grid-container-1 .grid-content-right { grid-column: 3; grid-row: 2;}.component-container .grid-container-1 .grid-footer { grid-column: 1/span 3; grid-row: 3;}.component-container .grid-container-2 { padding: 3px; height: 100%; width: 100%; background-color: #b1f3cc;}我有一個 SCSS，它使用網(wǎng)格來設計我的頁面樣式。請注意垂直滾動條?，F(xiàn)在，我想在這個表格的右側再添加一個div。所以我在這個div后面添加一個div，并將display:grid添加到這兩個div的容器中。結果，這些滾動條消失了，因為它們的 div 高度被搞亂了。請取消 SCSS 中第 9-11 行的注釋。display: grid;grid-template-columns: 1fr 1fr;grid-gap: 10px;那里發(fā)生了什么事？
2 回答
慕萊塢森
TA貢獻1810條經(jīng)驗 獲得超4個贊
auto該行為可能與隱式創(chuàng)建的網(wǎng)格行中關鍵字的計算結果相關。
auto是與最大內容相同的關鍵字（如果它是最大值）。作為最小值，它表示占用網(wǎng)格軌道的網(wǎng)格項的最大最小尺寸（由 min-width/min-height 指定）。
例如，當grid-auto-rows(或grid-template-rows) 屬性設置為時100%，如下所示，問題得到解決：
.component-container {
? width: 800px;
? height: 200px;
? background-color: lightyellow;
? border: 1px solid red;
? padding: 10px;
? overflow: hidden;
? display: grid;
? grid-template-columns: 1fr 1fr;
? grid-gap: 10px;
? grid-auto-rows: 100%;
}
.component-container {
? width: 800px;
? height: 200px;
? background-color: lightyellow;
? border: 1px solid red;
? padding: 10px;
? overflow: hidden;
? display: grid;
? grid-template-columns: 1fr 1fr;
? grid-gap: 10px;
? grid-auto-rows: 100%;
}
.component-container .grid-container-1 {
? display: grid;
? grid-template-columns: 150px 1fr 1fr;
? grid-template-rows: 50px 1fr 50px;
? grid-gap: 3px;
? padding: 3px;
? height: 100%;
? width: 100%;
? background-color: #2196F3;
}
.component-container .grid-container-1 .grid-item {
? background-color: rgba(255, 255, 255, 0.8);
? border: 1px solid darkblue;
? overflow: auto;
}
.component-container .grid-container-1 .grid-header {
? grid-column: 1/span 3;
? grid-row: 1;
}
.component-container .grid-container-1 .grid-nav {
? grid-column: 1;
? grid-row: 2/span 1;
}
.component-container .grid-container-1 .grid-content-left {
? grid-column: 2;
? grid-row: 2;
}
.component-container .grid-container-1 .grid-content-right {
? grid-column: 3;
? grid-row: 2;
}
.component-container .grid-container-1 .grid-footer {
? grid-column: 1/span 3;
? grid-row: 3;
}
.component-container .grid-container-2 {
? padding: 3px;
? height: 100%;
? width: 100%;
? background-color: #b1f3cc;
}
button {
? margin: 2px;
? width: 500px;
}
<div class="component-container">
? <div class="grid-container-1">
? ? <div class="grid-item grid-header">
? ? ? One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
? ? </div>
? ? <div class="grid-item grid-nav">
? ? ? One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
? ? </div>
? ? <div class="grid-item grid-content-left">
? ? ? <button type="button">Click Me!</button> One
? ? ? <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
? ? </div>
? ? <div class="grid-item grid-content-right">
? ? ? <button type="button">Click Me!</button> One
? ? ? <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
? ? </div>
? ? <div class="grid-item grid-footer">
? ? ? One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
? ? </div>
? </div>
? <div class="grid-container-2">
? ? Lorem Ipsum
? </div>
</div>
牛魔王的故事
TA貢獻1830條經(jīng)驗 獲得超3個贊
將你的 SCSS 變成 CSS。
“問題”是你的網(wǎng)格對于高度沒有限制，所以它會渲染到它需要的高度。如果你禁用你會看到overflow: hidden;
所以只需添加：grid-template-rows: 100%;網(wǎng)格將遵循 div 的高度并且不會溢出。
.component-container {
width: 800px;
height: 200px;
background-color: lightyellow;
border: 1px solid red;
padding: 10px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100%;
grid-gap: 10px;
}
.component-container .grid-container-1 {
display: grid;
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 50px 1fr 50px;
grid-gap: 3px;
padding: 3px;
height: 100%;
width: 100%;
background-color: #2196F3;
}
.component-container .grid-container-1 .grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid darkblue;
overflow: auto;
}
.component-container .grid-container-1 .grid-header {
grid-column: 1 / span 3;
grid-row: 1;
}
.component-container .grid-container-1 .grid-nav {
grid-column: 1;
grid-row: 2 / span 1;
}
.component-container .grid-container-1 .grid-content-left {
grid-column: 2;
grid-row: 2;
}
.component-container .grid-container-1 .grid-content-right {
grid-column: 3;
grid-row: 2;
}
.component-container .grid-container-1 .grid-footer {
grid-column: 1 / span 3;
grid-row: 3;
}
.component-container .grid-container-2 {
padding: 3px;
height: 100%;
width: 100%;
background-color: #b1f3cc;
}
button {
margin: 2px;
width: 500px;
}
<div class="component-container">
<div class="grid-container-1">
<div class="grid-item grid-header">
One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
</div>
<div class="grid-item grid-nav">
One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
</div>
<div class="grid-item grid-content-left">
<button type="button">Click Me!</button> One
<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
</div>
<div class="grid-item grid-content-right">
<button type="button">Click Me!</button> One
<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
</div>
<div class="grid-item grid-footer">
One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
</div>
</div>
<div class="grid-container-2">
Lorem Ipsum
</div>
</div>
- 2 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消