0

我有一个流畅的布局，左右有两个 div，它们在调整页面大小时是有弹性的，而中心 div 有一个最大宽度和一个最小宽度。

有谁知道如何使 div 跨越整个页面，即在当前布局之上（在顶部）？请使其与jsFiddle 示例一起使用——我希望拉伸的 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>
4

1 回答 1

0

您所要做的就是在上面添加一个 div <div class="container">。如果您不对其应用任何样式，它就会拉伸到整个宽度。所以：

<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>
于 2012-11-07T06:18:49.057 回答