具有固定宽度子元素的响应式布局答案

【问题标题】：Responsive Layout with a Fixed Width Child Element具有固定宽度子元素的响应式布局
【发布时间】：2015-04-14 16:30:50
【问题描述】：

我想在网页中实现以下响应式布局（HTML5 和 CSS3）：

所有三个 div 标签都包裹在一个最大宽度为 960px 的 div 中；

我想保持“导航” div 的宽度固定，因此应用了以下样式：

width:90px; float:left; padding:5px;

如何在不指定宽度的情况下让“内容”div 占据所有剩余空间，同时保持布局响应？

谢谢。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

#content{
    margin: 0 0 0 90px;
    padding: 10px 30px;
}

【讨论】：

【解决方案2】：

只需将所有内容放在一个包装 div 中并将其宽度指定为 960 像素

【讨论】：

【解决方案3】：

这取决于您想要（需要）的浏览器支持，IE6+ 方式中只有 3 个 DIV 很难（我认为这实际上是不可能的）。最好的办法是在内容的 DIV 上使用 CSS calc 方法 width: calc(100% - 90px); CSS calc 方法支持 IE9+，因此您需要考虑到这一点，在 IE8 中，您仍然需要使用百分比。

如果您想知道如何分隔 IE9+ 代码，那么只需使用 @media 即可：

    @media all {
        #navigator {
            width: 90px;
        }
        #content {
            width: calc(100% - 90px);
        }
    }

@media 是 IE9+ 兼容的，因为 IE8- 不能对它做出正面或反面，所以不会影响它们。所以把IE9+代码放在里面是安全的。

如果您可以稍微修改一下 HTML，我建议您：

<html>
<head>
    <style type="text/css">
        #h {
            background: #f00;
        }   
        #n {
            background: #0f0;
            width: 90px;
            float: left;
        }   
        #c_container {
            background: #005;
            width: 100%; 
            float: right;
            margin: 0 0 0 -90px;
            padding-left: 90px; 
            box-sizing: border-box;
        }
        #c {
            background: #00f;
            height: 50px;

        }
        #container {
            max-width: 940px;
            margin: 0 auto 0 auto;
        }
    </style>
</head> 
<body>
    <div id="container">
        <div id="h">head</div><div id="c_container"><div id="c">cont</div></div><div id="n">nav</div>
    </div>      
</body>

注意 content 有一个单独的容器，其中以一种方式浮动，而 navigator 以另一种方式浮动，这是为了确保它们不在同一架飞机。

#c_container 有一个margin-left: -90px 将其带到与导航器相同的行，还有一个padding-left: 90px; 以确保#c（新内容DIV）现在可见。 #c_container 也有 #c_container DIV。如果没有它，您将需要另一个容器 DIV，因此宽度不会受到填充的影响，但这很容易添加，所以我会留给您。

如果您将另一个容器 DIV 用于内容，那么该解决方案将与 IE6+ 兼容，而我给您的解决方案与 IE8+ 兼容。

【讨论】：