三列布局难题，这次没有页眉和页脚

我知道这是那些Web 1.0新手问题之一，但唉，我有能力自己问这个问题。我做的网站不需要这种布局，现在正在考虑为一个三列布局，固定宽度的中心列的朋友做一个...与没有页眉或页脚盒元素的扭曲和规定所有三个色谱柱都在高度方向上展开，以适应观察它们的任何屏幕的大小。三列布局难题，这次没有页眉和页脚

进一步加剧此问题是body将有一个颜色或背景图像和中心列将有自己的背景颜色或图像。

在视觉上，页面布局会是这样：

+----------+---------------+----------+ 
|nothing |only content |nothing | 
|here  |will be here |here  | 
|just the |w/a different |just the | 
|body b/g |background  |body b/g | 
|color or |color or  |color or | 
|image  |image   |image  | 
|   |    |   | 
|   |all 3 columns |   | 
|   |always fill |   | 
|   |screen height |   | 
+----------+---------------+----------+

我看过对绝对定位（论坛的Adobe），这显然与人造列和其他绝对/相对位置发生冲突了一些有趣的论点。理想情况下，我希望使用浮动工具完成所有工作，但我不确定完成此工作的最有效方法。到目前为止，我还没有尝试过任何东西，因为这只是落在我的腿上。再次，我知道这是基本的，但是当我从具有一种B/G颜色和居中元素的网站来时，我想，'为什么这么难？'

来源

2013-03-13 mileaminute

不知道，如果你打算在中间部分比边柱更宽的 - 如果你这样做，你会希望它是超过33.3％更宽。

身高，你想：

html, body { 
     height: 100%; 
    }

然后确保中央DIV是

position: relative; 
    height: 100%; 
    margin: 0 auto;

看到这里http://jsfiddle.net/mWqwD/

来源

2013-03-13 05:45:14 Rockafella

小提琴这是完美的！只有一个问题......如果我将任何内容放在高于浏览器窗口的'.one' div内，导致垂直滚动条出现，我注意到'.one'停在窗口底部，内容继续向下超越它。 '.one' div并没有延伸到占用内容的额外空间。有没有办法解决？ – mileaminute 2013-03-13 17:53:57

将高度改为最小高度应该可以解决这个问题吗？ http://jsfiddle.net/mWqwD/1/ – Rockafella 2013-03-13 21:17:39

我只是试过它，没有运气......仍然有相同的问题，其中div保留了浏览器窗口的高度，并且不会向下延伸。 – mileaminute 2013-03-14 19:22:59

设置中间一列的宽度并给它margin: auto。这在块级元素的两侧应用相等的利润率。

CSS

#center { 
    width: 33.33%; 
    margin: auto; 
}

来源

2013-03-13 05:20:02 thgaskell

三列布局难题，这次没有页眉和页脚

回答

相关问题