Question

我的html布局遇到了一个小问题。

当我有内容时 - 它运作正常：

http://jsfiddle.net/exqofLft/

但是当我没有内容时。 “换行”高度变为0，页眉和页脚结合在一起。

例如：http://jsfiddle.net/aqgo9370/

没有内容或内容很少的时候。我希望标题位于顶部，然后是完整大小的包装和页面底部的页脚。

任何想法如何做到这一点？

例如：

CSS：

html, body 
{
    height:auto;
    background-color:grey;
    position:relative;
    margin:0;
}

#header
{
    position:absolute;
    width:auto;
    min-width:100%;
    height:75px;
    background-color:yellow;
}

#wrap
{
    position:relative;
    width:auto;
    min-width:100%;
    height:auto;
    background-color:blue;
    margin:75px 0 0 0;
}

footer
{
    position:absolute;
    width:auto;
    min-width:100%;
    height:50px;
    background-color:black;
}

Answer 1

你可以使用box-sizing:border-box，并给它一个填充到底部，顶部分别对应于页脚和标题：

 #header
{
    top:0px;
    position:relative;
    width:100%; 
    height:75px;
    background-color:yellow;


}

#wrap
{
    position:relative;
    width:100%;
    height:100%;
    background-color:blue;
    box-sizing: border-box;
    padding-top: 75px;
    padding-bottom:50px;

}

footer
{
    position:absolute;
    width:auto;
    min-width:100%;
    height:50px;
    background-color:black;
    bottom:0px;
}

<强> Example

Answer 2

通过使用vw / vh，我们可以将元素的大小设置为相对于视口的大小。在此ID [{1}}，Demo

中添加以下代码

#wrap{}

Answer 3

你可以使用jquery。

var headerH = $('#header').height();
var footerH = $('footer').height();
var windowH = $(window).height();

$('#wrap').css({
    'minHeight': (windowH - (headerH + footerH)) + 'px' 
});

我在你的html / css中做了一些修改。

检查小提琴： http://jsfiddle.net/skeurentjes/aqgo9370/9/

Answer 4

这样做不需要Js和位置。试试这个，这在技术上称为粘性页脚

html, body {
	height:100%;
    background-color:grey;
	margin:0;
}
#content {
    float: left;
    width: 100%;
    min-height: 100%;
    padding-bottom: 50px;;/*height of your footer*/
    box-sizing: border-box;
}
#header {
	width:100%;
	height:75px;
	background-color:yellow;
}
#wrap {
    width:100%;
	height:auto;
	background-color:blue;
}
footer {
    float: left;
	width:100%;
	height:50px;
	background-color:black;
    margin-top: -50px;/*height of your footer*/
}

<div id="content">
    <div id ="header"></div>
    <div id = "wrap"></div>
</div>
<footer></footer>

Answer 5

使用所需高度的#wrap { padding-bottom:100%;/*or 50% or px value like 50px*/ }，如

html,
body {
  height: auto;
  background-color: grey;
  position: relative;
  margin: 0;
}
#header {
  position: absolute;
  width: auto;
  min-width: 100%;
  height: 75px;
  background-color: yellow;
}
#wrap {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background-color: blue;
  margin: 75px 0 0 0;
  padding-bottom: 100%;
}
footer {
  position: absolute;
  width: auto;
  min-width: 100%;
  height: 50px;
  background-color: black;
}

<div id="header">
  <div>

    <div id="wrap"></div>

    <footer></footer>

public class Sausage : IValidatableObject
{

    public string Location { get; set; }

    [Required]
    public decimal Lat { get; set; }

    [Required]
    public decimal Lng { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (Lat == decimal.Zero || Lng == decimal.Zero)
        {
            yield return new ValidationResult("Please ensure both Lng & Lat is filled in", new[] { "Location" });
        }
    }
}

Answer 6

添加wrap id的最小高度例如：

  <script src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
          data-key="pk_test_ur0ebwOGBrsNzQrpdCNENIu4"
          data-data-amount="1900" 
          data-data-description="One year's subscription"
          data-address='true'
          data-name='Test'
          data-description='Test Transaction'
          data-panel-label='Checkout'
          ></script>

HTML布局 - 即使没有内容，也要保持包装纸高度100％

6 个答案: