当前位置: 首页 > 面试题库 >

CSS单列布局,以页眉和页脚为中心的固定宽度为100%高

江超英
2023-03-14
问题内容

我最近一直在研究CSS布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。

有什么建议吗?我尝试过这里发布的几种方法,但是没有一种符合我的标准。另外,我不想为此使用JS,因此它必须是纯CSS。

我不是专家,所以我不知道采用哪种方法:

三列,每边的边距减去中心列宽度的一半再加上一个假的中心列,以拉伸到100%的高度?我有点不喜欢这个主意,因为我的侧栏不会有任何内容

边距为0的单列auto 0自动将其居中并置顶:xx px为标题留出空间?然后如何将其拉伸到100%的高度?

任何帮助,高度赞赏。

欢呼声


问题答案:

更新资料

对于现代浏览器(2015年),使用display:flex以下简单方法即可:

html,

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

body {display:flex; flex-direction:column;}

#main {flex-grow:1;}



/* optional */

header {min-height:50px; background:green;}

#main {background:red;}

footer {min-height:50px; background:blue;}


<header>header</header>

<div id="main" role="main">content</div>

<footer>footer</footer>

上面的代码既可以使用固定高度的页眉和页脚(只需在样式中添加一个高度),也可以使用可变高度(如当前所示-
可以根据页眉和页脚的内容而变化),而内容将占用其余空间。

如果内容比文档长,则页脚将被下推。

旧帖子:

有几种使用纯CSS做到这一点的方法。基本上,您需要从这样的html结构开始:

<div id="wrapper">
    <div class="top"></div>
    <div class="middle">
        <div class="container">
        </div>
    </div>
    <div class="bottom"></div>
</div>

版本1 使用边界框,因此将与较旧的浏览器不兼容(并且您可能需要添加moz,webkit和ms前缀才能使其在所有浏览器中均可使用):

html,
body { height: 100%; margin: 0; padding: 0; }
#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }
.middle { min-height: 100%; position: relative; }
.top { margin-top: -100px; height: 100px; }
.bottom { margin-bottom: -75px; height: 75px; }
.container { padding: 10px; }

版本2 使用绝对定位,并且对跨浏览器更友好:

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

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
.middle {min-height:100%;}
.top {margin-top:-50px; height:50px;}
.bottom {margin-bottom:-50px; height:50px;}
.container {padding:10px;}

版本3 略微更改了html,但是如果您具有可变的高度页眉和页脚,则它会更健壮:

<div id="wrapper">
    <div class="table">
        <div class="top row"><div class="cell"></div></div>
        <div class="middle row"><div class="container cell"></div></div>
        <div class="bottom row"><div class="cell"></div></div>
    </div>
</div>

CSS

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

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}

.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}

.middle {height:100%;}
.container {padding:10px;}


 类似资料:
  • 问题内容: 我最近一直在研究CSS布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。 有什么建议吗?我已经尝试过这里发布的几种方法,但是没有一种符合我的标准。另外,我不想为此使用JS,因此它必须是纯CSS。 我不是专家,所以我不知道采用哪种方法: 三列,每列的边距减去中心列宽度的一半再加上一个假的中心列,以拉伸到100%的高度?我有点不喜欢这个想法,因

  • 我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它,但绝望正在逼近。我需要: 固定高度、100%宽度、静态标题 固定高度、100%宽度、静态页脚 固定宽度的内容区域,居中和全部剩余高度 内容区域需要: 两列,均为全高 上面的内容相当简单,但可能需要更改以适应下一部分。 每一列都需要: 静态标头 静态页脚 页眉和页脚之间的可滚动内容区域 我花了一天的时间尝试各种方法(甚至是基于--喘息--

  • 问题内容: 从我的研究来看,这似乎是一个绝对经典的CSS问题,但我找不到确切的答案-所以是StackOverflow。 如何将内容div设置为占主体高度的100%,减去固定高度的页眉和页脚所占的高度? 我想使用纯CSS,并且答案在所有浏览器中都是防弹的。 问题答案: 这个版本将在所有最新的浏览器工作,IE8,如果你有Modernizr的脚本(如果不只是改变和成S):

  • 布局:移动,垂直布局,页眉(固定高度),页脚(固定高度)。如何用img填充剩余空间,限制高度 这是我在iOS上非常常见的布局。试图理解如何在CSS中做到这一点。 以下是我正在尝试的: 使用flexbox和flex-direction列设置页眉和页脚的高度(或可以使用flex-basis完成)页眉和页脚的flex-shrink:0,这样它们就不会在图像容器上收缩flex-shrink:1,所以如果需

  • 我将页眉和页脚设置为Position:Fixed。但如果是可滚动的内容,则文本将转到页眉/页脚区域:下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/ 在这种情况下,我不想使用background-image或background-color。 下面是CSS: null null

  • 问题内容: 我有一个非常基本的HTML页面。该代码如下所示: 通常,我的正文非常大。文本足够大,因此需要滚动条。看起来页脚位于文本顶部,而底部。然后,当我向下滚动时,页脚不会保持固定。我究竟做错了什么? 谢谢 问题答案: 您需要在页脚中: