Question

好的，我甚至不确定这是否可行，但这是我的问题。

我有两个div，<div id="article">和<div id="sidebar">我希望它们采用两列响应式布局。不过#sidebar我想保持一个固定的宽度。

目前我有以下设置：

<html>
  <div id="container">
    <div id="article">
      <h1>Hello World</h1>
    </div>
    <div id="sidebar">
    </div>
  </div>
</html>

-

#article {
  width: auto;
  float: left;
  padding: 0;
  margin: 0 300px 0 0;
}

#sidebar {
  float: right;
  width: 300px;
  margin: 0 0 0 -300px;
  padding: 0;
}

这基本上有效，但是如果内容不足，＃article div并不总是填充空间。有没有办法用内容填充div以使其扩展到其全宽？我想要一个水平标尺遍历整页，但它只是我最长标题的宽度。

原始示例：http://imgur.com/Z7qwcNk

Answer 1

<强> Demo

CSS

html, body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
#container {
    height: 100%; /* to occupy full width and height */
    width: 100%;
}
#article {
    height: 100%;
    width: calc(100% - 300px); /* will adjust the width of sidebar */
    float: left;
    background: green;
}
#sidebar {
    float: right;
    width: 300px;
    height: 100%;
    background: red;
}

HTML

<div id="container">
    <div id="article">
         <h1>Hello World tes test test test test tes tete test test tes testve</h1>

    </div>
    <div id="sidebar"></div>
</div>

Answer 2

看看这个FIDDLE。它不会给你一个固定的宽度，但它会得到一个比例宽度。我认为这将是你最好的选择，同时仍然保持响应。您还可以使用width：calc（100％ - 您的固定像素宽度）。但是，如果您需要支持该浏览器，则无法在ie8及以下版本中使用。

#container {
  width: 100%;
   background-color: yellow;
   overflow:hidden;
    height: 700px;
 }

 #article {
   width: 70%;
   display:inline-block;
  background-color: red;
  float: left;
 }

 #sidebar {
    background-color: blue;
   float: right;
   width: 30%;
 }

使Div填充全宽但带侧边栏 - 不依赖于内容

2 个答案: