gpt4 book ai didi

html - 流体布局,div 横跨整个布局的顶部

转载 作者:行者123 更新时间:2023-11-28 13:33:39 26 4
gpt4 key购买 nike

我有一个流畅的布局,左右两个 div 在调整页面大小时具有 flex ,中间的 div 有一个最大宽度和一个最小宽度。

有谁知道如何使 div 延伸到整个页面,即高于当前布局(在顶部)?请使其与 jsFiddle example 一起使用-- 我希望拉伸(stretch)的 div 成为具有背景的固定标题。

<style>
html, body {
height: 100%;
font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
text-align: center;
}
.fixed {
min-width: 200px;
max-width:300px;
background: rgb(34, 177, 77);
color: white;
}
.fluid {
background: rgb(0, 162, 232);
}
</style>

<div class="container">
<div class="fluid">
I'm 150px wide! Glee is awesome!
</div>
<div class="fixed">
I'm fluid! Glee is awesome!
</div>
<div class="fluid">
I'm 150px wide! Glee is awesome!
</div>
</div>

最佳答案

你所要做的就是在 <div class="container"> 上面添加一个 div .如果您不对其应用任何样式,它会已经拉伸(stretch)到全宽。所以:

<style>
html, body {
height: 100%;
font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.header {
background: red;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
text-align: center;
}
.fixed {
min-width: 200px;
max-width:300px;
background: rgb(34, 177, 77);
color: white;
}
.fluid {
background: rgb(0, 162, 232);
}
</style>

<div class="header">
I'm a header! Hooray!
</div>
<div class="container">
<div class="fluid">
I'm 150px wide! Glee is awesome!
</div>
<div class="fixed">
I'm fluid! Glee is awesome!
</div>
<div class="fluid">
I'm 150px wide! Glee is awesome!
</div>
</div>

关于html - 流体布局,div 横跨整个布局的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13262446/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com