gpt4 book ai didi

html - Bootstrap 3 : 3 row stick on top and bottom

转载 作者:可可西里 更新时间:2023-11-01 12:48:45 29 4
gpt4 key购买 nike

抱歉我的英语不好

我研究了 bootstrap 并尝试编写这样的布局 enter image description here

灰色部分是浏览器窗口。

  • 第 0 行必须放在顶部(如导航栏)
  • 第 2 行必须贴在底部(如页脚)
  • 第 1 行是动态高度,取决于浏览器窗口高度。

如何通过CSS呈现这些?

<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-5 column">
</div>
<div class="col-md-2 column">
</div>
<div class="col-md-5 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
</div>
</div>
</div>

最佳答案

尝试使用这段代码:

<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<style>
p{text-align: center;}
html, body{height:100%;}
#content{
min-height:100%;
height:auto !important;
height:100%;
/* Negative indent header and footer by its height */
margin:-80px auto -60px;
/* Pad bottom by header and footer height */
padding:80px 0 60px;
}
/* Set the fixed height of the header here */
#header{height:80px;}
/* Set the fixed height of the footer here */
#footer{height:60px;}
</style>
</head>

<body>
<div id="header">
<div class="container">
<div class="row">
<div class="col-xs-12"><p>header</p></div>
</div>
</div>
</div>

<div id="content">
<div class="container">
<div class="row">
<div class="col-xs-5"><p>left column</p></div>
<div class="col-xs-2"><p>center column</p></div>
<div class="col-xs-5"><p>right column</p></div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-xs-12"><p>footer</p></div>
</div>
</div>
</div>
</body>
</html>

关于html - Bootstrap 3 : 3 row stick on top and bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21064234/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com