Html CSS圣杯-发行2固定/1流体柱_Html_Css

Html CSS圣杯-发行2固定/1流体柱

html css

Html CSS圣杯-发行2固定/1流体柱,html,css,Html,Css,好吧，我一直在努力为我的网站实现“圣杯”风格的布局，到目前为止，它非常接近，但我注意到两件事我想修复目标是“粘性”页脚，页面长度随浏览器窗口高度、页眉和3列而扩展。左边和右边有2个固定柱，中间有一个流体柱。我现在面临的问题是，我的中心“流体”专栏似乎不像我预期的那样。基本上，我希望固定柱始终完全显示，中间柱填充剩余的水平空间。但中柱占用了很多空间，因此我必须滚动查看右柱（见下图）。此外，“文本对齐：居中”代码在中柱的可视区域内似乎不是居中文本。感谢您的帮助图片： html: <htm

好吧，我一直在努力为我的网站实现“圣杯”风格的布局，到目前为止，它非常接近，但我注意到两件事我想修复

目标是“粘性”页脚，页面长度随浏览器窗口高度、页眉和3列而扩展。左边和右边有2个固定柱，中间有一个流体柱。

我现在面临的问题是，我的中心“流体”专栏似乎不像我预期的那样。基本上，我希望固定柱始终完全显示，中间柱填充剩余的水平空间。但中柱占用了很多空间，因此我必须滚动查看右柱（见下图）。此外，“文本对齐：居中”代码在中柱的可视区域内似乎不是居中文本。感谢您的帮助

图片：

html:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="test.css" />
    </head>
    <body>
        <div id="header">
            <p>Header</p>
        </div>
        <div id="container">
            <div id="center">
                <p>Content</p>
            </div>
            <div id="left">
                <p>Content</p>
            </div>
            <div id="right">
                <p>Content</p>
            </div>
        </div>
        <div id="footer">
            <p>Footer</p>
        </div>

    </body>
</html>

无需

浮动

。只需

position:absolute

侧边栏，并在两侧提供中心div固定边距

CSS

#container{
    position: relative;
}

#left, #right {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
}

#left {
    left: 0;
}

#right {
    right: 0;
}

#center {
    margin: 0 200px;
}

我已经在我的布局上做了这个，它对我来说很好

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container{
  display: inline-flex;
  width: 100%;
  height: 100%;
  background: lightblue;
}

#left {
  width: 240px!important;
  min-width: 240px!important;
  background: red;
  height: 100%;
}

#right {
  width: 400px!important;
  min-width: 400px!important;
  background: red;
  height: 100%;
}

#center {
  background: blue;
  width: 100%;
  min-width: 600px;
  height: 100%;
}

我使用定位走了另一条路：@Caleb:如果可以的话，我会使用这个实现

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container{
  display: inline-flex;
  width: 100%;
  height: 100%;
  background: lightblue;
}

#left {
  width: 240px!important;
  min-width: 240px!important;
  background: red;
  height: 100%;
}

#right {
  width: 400px!important;
  min-width: 400px!important;
  background: red;
  height: 100%;
}

#center {
  background: blue;
  width: 100%;
  min-width: 600px;
  height: 100%;
}