三行无表格CSS布局,中间行填充剩余空间

前端之家收集整理的这篇文章主要介绍了三行无表格CSS布局,中间行填充剩余空间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要的是一个基于像素的高度包含3行的div.顶行具有可变高度,具体取决于内容.底行有一个固定的高度.中间行填充任何剩余空间.一切都宽100%.

我一直在努力构建一个基于div和CSS的布局几个小时,这需要几秒钟才能使用表格.我尝试了很多方法,包括负底边距,嵌套div,各种定位,高度设置,显示:表格,没有什么能让我得到我需要的东西.我搜索了这个网站和互联网,刷新了我对液体布局的各种方法的记忆.徒劳无功.

我并不特别担心与IE6等“旧”浏览器的兼容性(此应用程序不适用于“公共”用途).只是让它在IE8 FF Chrome中工作会很棒.

我已经将问题剥离到下面发布的一个简单示例,以及基于表格的布局显示我想要的内容.旁注:我喜欢CSS和无桌面布局,但是,有时我们必须经历的长度才能让它成功.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}

/* Styles for colors */
#top td,.top {width:100%;background-color:pink;}
#mid td,.mid {width:100%;background-color:lightgreen;border:1px solid red;}
#bot td,.bot {width:100%;background-color:lightblue;}

/* Styles for Table-based Layout */
#layout {width:100%;height:100%;border-collapse:collapse;}
#layout td {vertical-align:top;padding:0px;}
#top td {}
#mid td {height:100%;}
#bot td {height:2em;}

/* Styles for Table-less Layout */
.top {}
.mid {}
.bot {height:2em;position:absolute;bottom:0px;}

</style>
</head>
<body>

Layout I want (with tables):
<div class="container">
  <table id="layout">
    <tr id="top"><td>Top:<br/>Content-based<br/>Height</td></tr>
    <tr id="mid"><td>Middle:<br/>Fill remaining space</td></tr>
    <tr id="bot"><td>Bottom: Fixed Height</td></tr>
  </table>
</div>

<hr/>

Best I can get with CSS:
<div class="container">
  <div class="top">Top:<br/>Content-based<br/>Height</div>
  <div class="mid">Middle:<br/>Fill remaining space</div>
  <div class="bot">Bottom: Fixed Height</div>
</div>

</body>
</html>

与此同时,我不能让这阻止我的进步,已经花了太多时间.我正在进行项目中的表格布局.它很简单,完全满足要求,即使纯粹主义者在某个地方哭泣.

感谢您的任何建议 – 我很好奇这个“正确”的解决方案是什么,我讨厌被难倒.当然,这是可行的吗?

解决方法

问题的关键在于以不同的方式查看问题 – 如果您使用Google“粘性页脚”,您将找到以下解决方案:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}

.notbottom2 {
    min-height: 100%; background-color:lightgreen; width: 100%;
    height: auto !important;
    height: 100%;
}

.mid2 {padding-bottom: 2em;}
.top2 { width: 100%;  background-color: pink;}
.bottom2 { height: 2em; width: 100%; margin-top: -2em; background-color: lightblue; }

</style>
</head>
<body>
<div class="container">
<div class="notbottom2">
    <div class="top2">Top:<br/>Content-based<br/>Height</div>
    <div class="mid2">Middle:<br/>Fill remaining space</div>
</div>
<div class="bottom2">Bottom: Fixed Height</div>
</div>
</body>
</html>

编辑:在那里,这应该是你想要的,或多或少.

原文链接:https://www.f2er.com/css/215739.html

猜你在找的CSS相关文章