-2

我需要一个带有页眉、页脚和 3 列（中/左/右）中间部分的跨浏览器CSS 布局 (IE7+)的 CSS 代码和 HTML 。我希望 MAIN（参见插图）具有灵活的宽度，但两个侧边栏的宽度都是固定的（例如 200 像素）。当我缩小窗口时，我不希望侧边栏塌陷。

MAIN DIV 将有一个最小宽度，比如说 800px。

所有元素都应具有流体高度。

在此处输入图像描述

谢谢

4

3 回答 3

1

这里有一些可以帮助您开始的东西（基本上看起来您希望我们为您完成所有工作）。

将“main”和“sidebar”包装在一个包装 div 中，而不是为这个 div 赋予以下样式：

.wrapper
{
    margin: auto;
    position: absolute;
    top: 50px; /* Leave 50 pixels for header */
    left: 0; 
    bottom: 0; 
    right: 30px; /* Leave 30 pixels for footer */
}

之后，您可以提供内部元素 { height: 100% } 它会起作用。

也许这个链接也会帮助你：http ://codepen.io/shshaw/full/gEiDt

于 2013-08-10T15:00:52.290 回答
1

检查这个小提琴手风琴中心http://jsfiddle.net/PduXc/7/

有关完整示例，请单击此处http://jsfiddle.net/PduXc/14/

body
{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.sidebarleft
{
    width: 100px;
    height: 350px;
    background: red;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 7;
}

.sidebarright
{
    width: 100px;
    height: 350px;
    background: red;
    right: 0;
    top: 0;
    position: absolute;
    z-index: 6;
}
.main
{
    width: 100%;
    height: 350px;
    background: green;
    position: absolute;
    z-index: 5;
}
于 2013-08-10T15:25:42.870 回答
0

不完全确定这是否会对您有所帮助，但首先，您是否希望页眉和页脚是 100% 的屏幕全宽？

尝试这个：

html:

<body>
    <div id="header"></div>
    <div id="sidebarA"></div>
    <div id="main"></div>
    <div id="sidebarB"></div>
    <div id="footer"></div>
</body>

CSS：

#header {
  width: 100%;
  height: 200px;
  padding: 0;
  margin: 0 auto;
  background: #333; /*--Give it some color ;) --*/
  border-bottom: 2px solid #444;
}
#sidebarA {
  width: 200px;
  height: 800px;
  padding: 0;
  margin: 0;
  background: blue;
  float: left;
}
#main {
  width: 800px;
  height: 800px;
  padding: 0;
  margin: 0 auto;
  background: purple;
}
#sidebarB {
  width: 200px;
  height: 800px;
  padding: 0;
  margin: 0;
  background: blue;
  float: right;
}
#footer {
  width: 100%;
  height: 200px;
  padding: 0;
  margin: 0 auto;
  background: #333;
  border-top: 2px solid #444;
}

当然，所有这些都可以根据您的喜好轻松定制；）试一试，看看您是否喜欢它，如果有的话，这是一个很好的框架布局，可以从一开始就进行调整。

于 2013-08-10T11:41:36.550 回答