Question

我正在为朋友创建一个网站，当我添加一个图片时它就不会到底部，我已经尝试了从背景位置到左下角的所有内容。填充底部：0px到其他一切，它只是在背景下有一个巨大的差距。我尝试了多张图片，因此它不仅仅是我的图片。我正在使用bootstrap，下面我已经把我的代码加上自定义的CSS代码..

HTML

<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar-fixed-top/" style="color:white;">71 users online</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase"><br>
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
      <div class="carousel-caption">
          <h1>Lime ravamped</h1>
          <p>Lime returns with some amazing improovements.</p>
      </div>
    </div>
    <div class="item">
      <img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
      <div class="carousel-caption">
          <h1>Hello Raven</h1>
          <p>How are you raven?</p>
      </div>
    </div>
    <div class="item">
      <img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
      <div class="carousel-caption">
          <h1>This is cool</h1>
          <p>Lime returns with some amazing improovements.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
<a href="" class="btn btn-warning spaceform">Sign Up</a>
</div>
</div>
</div>
<div class="container" style="">
<div id="footer"><br>
<p>&copy; [site.name] 2016. All Rights Reserved.</p>
</div> 
<p>&nbsp;</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

CSS

#welcome_placeholder, .welcome_placeholder {
    background-color: #5bc0de;
    height:300px;
    border-radius:6px;
    width:699px;
    color:white;
    padding-top:1px;
    padding-left:28px;
    background-image: url('/bg_hotel.out.png');

}

#news_container {
    height: 296px;
    width: 625px;
    border-radius
}

#news_article {
    height: 296px;
    width: 625px;
}

.carousel {
    border-radius: 5px 5px 5px 5px !important;
    overflow: hidden !important;
}

.jumbotron {
    border: 1px solid #ddd;
    background-color: #FFF !important;
    padding-left:20px !important;
    padding-top:10px !important;
    padding-right:20px !important;
    padding-bottom:20px !important;

}

p {
    font-size:14px !important;  
}

.spaceform {
    margin-top:8px; 
}

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
    padding-left:0px !important;
}

html {
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  font-family: 'Open Sans', sans-serif !important;
}
body {
  background-color: #edf2f6 !important;
  background-image:url('http://s9.tinypic.com/xckwhy_th.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
}

＆＃13;

#welcome_placeholder,
.welcome_placeholder {
  background-color: #5bc0de;
  height: 300px;
  border-radius: 6px;
  width: 699px;
  color: white;
  padding-top: 1px;
  padding-left: 28px;
  background-image: url('/bg_hotel.out.png');
}
#news_container {
  height: 296px;
  width: 625px;
  border-radius
}
#news_article {
  height: 296px;
  width: 625px;
}
.carousel {
  border-radius: 5px 5px 5px 5px !important;
  overflow: hidden !important;
}
.jumbotron {
  border: 1px solid #ddd;
  background-color: #FFF !important;
  padding-left: 20px !important;
  padding-top: 10px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}
p {
  font-size: 14px !important;
}
.spaceform {
  margin-top: 8px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
  padding-left: 0px !important;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: 'Open Sans', sans-serif !important;
}
body {
  background-color: #edf2f6 !important;
  background-image: url('http://s9.tinypic.com/xckwhy_th.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
}

＆＃13;

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar-fixed-top/" style="color:white;">71 users online</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>
<div class="container theme-showcase">
  <br>
  <div class="col-md-8">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
          <div class="carousel-caption">
            <h1>Lime ravamped</h1>
            <p>Lime returns with some amazing improovements.</p>
          </div>
        </div>
        <div class="item">
          <img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
          <div class="carousel-caption">
            <h1>Hello Raven</h1>
            <p>How are you raven?</p>
          </div>
        </div>
        <div class="item">
          <img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
          <div class="carousel-caption">
            <h1>This is cool</h1>
            <p>Lime returns with some amazing improovements.</p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
    <!-- Carousel -->
  </div>
  <div class="col-md-4">
    <div class="jumbotron">
      <h4>Sign Up</h4>
      <form name="login" action="post">
        <input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
        <input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
        <input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
        <a href="" class="btn btn-warning spaceform">Sign Up</a>
    </div>
  </div>
</div>
<div class="container" style="">
  <div id="footer">
    <br>
    <p>&copy; [site.name] 2016. All Rights Reserved.</p>
  </div>
  <p>&nbsp;</p>
</div>

＆＃13;

Answer 1

图像在身体的底部对齐。它是什么。身体在图像完成的地方结束。如果你使页脚div更大，你会看到图像到达底部（div的底部）。

<body>包含所有内容，因此图像位于内容的末尾而不是浏览器窗口的底部。如果你想让图像始终位于浏览器窗口的底部，那么你应该使用position：absolute;底部：0;

如何将此添加到正文：

height:100vh;

见这里：https://jsfiddle.net/1zq13grk/

背景图像下的大差距

1 个答案: