css - 具有自动边距的特定 css 定位/动态宽度

标签 css height positioning margin

为了更好地理解问题做了一张图片。

picture showing the problem

需要 .bgimage 和 .content div 的代码

这对于跨浏览器 css(IE7+ 和其他主要浏览器)甚至没有任何脚本是否可行？

最佳答案

它实际上比预期的要长一点，但我在现实生活中得到了你的照片。如果没有先做更多研究并编写一些实际代码，请不要在这里再问任何问题。

Here is a demo

代码

HTML:

<body>
  <div id = "header">
  </div>
  <div id = "bgimage">
  </div>
  <div id = "content">
  </div>
  <span class = "clear"></span>
  <div id = "footer">
  </div>
</body>

CSS:

*
  {
  margin: 0;
  padding: 0;
  }

body
  {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  }

#header
  {
  width: 100%;
  height: 200px;
  background-color: purple;
  }

#bgimage
  {
  position: absolute;
  top: 200px;
  left: 0px;
  right: 50%;
  height: 600px;
  background-color: green;
  }

#content
  {
  position: relative;
  width: 700px;
  height: 600px;
  float: right;
  z-index: 2;
  background-color: blue;
  }

.clear
  {
  clear: both;
  }

#footer
  {
  position: relative;
  top: 600px;
  width: 100%;
  height: 200px;
  background-color: red;
  }

注意:我还没有优化 CSS，那里可以做一些工作。

The code is also here