html - 将div一直延伸到底部没有滚动条

标签 html css twitter-bootstrap

我遇到了一个问题，我似乎无法将 div 一直延伸到底部。我在 stackoverflow 上查看过这里，找到了一些关于它的主题并进行了尝试，但它并不是 100% 有效，它也总是会创建一个滚动条。

顺便说一句，我正在为我的元素使用 Twitter Bootstrap。

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Divespotter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">DIVESPOTTER</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">ONTDEK</a></li>
              <li><a href="#about">GALLERIJ</a></li>
              <li><a href="#contact">FORUM</a></li>
              <li><a href="#contact">BLOG</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="maincontent">
     <div class="container">
        <div class="row">
          <div class="span6">
            <p class="title">Hét digitaal logboekje.</p>
            <p class="intro">Het logboek is een belangrijk onderdeel voor dé beste duikervaring. Divespotter helpt u deze ervaringen nooit meer zal vergeten.</p>

            <p class="register"><a href="#" >REGISTREER NU!</a></p>
          </div>
          <div class="span6">
            <div id="myCarousel" class="carousel slide">
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>
              <!-- Carousel items -->
              <div class="carousel-inner">
                <div class="active item">
                  <img src="img/afb1.jpg"/>
                  <div class="carousel-caption">
                    Eerste afbeelding
                  </div>
                </div>
                <div class="item">
                  <img src="img/afb2.jpg"/>
                  <div class="carousel-caption">
                    Tweede afbeelding
                  </div>
                </div>
                <div class="item">
                  <img src="img/afb3.jpg"/>
                  <div class="carousel-caption">
                    Derde afbeelding
                  </div>
                </div>
              </div>
              <!-- Carousel nav -->
              <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
              <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>

        </div>

      </div>
      </div>




    </div> 
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="span4">
            <p>Log</p>
            <p>Leg al je duikervaringen vast zodat je er later terug van kan genieten precies of je erbij bent.</p>
          </div>
          <div class="span4">
            <p>Ontdek</p>
            <p>Ontdek nieuwe duiklocaties, leer van mededuikgenoten en bekijk foto’s van andere duikers over de hele wereld.</p>
          </div>
          <div class="span4">
            <p>Deel</p>
            <p>Deel al je duikervaringen en foto’s met je vrienden op Facebook, Twitter, ...</p>
          </div>
        </div>
        </div></div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

  </body>
</html>

在 style.css 中:

html, body { height: 100%;}
body
{

    font-family: 'Montserrat';
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
.navbar .brand {

    color: #232222;
    font-size: 25px;
    margin-right: 20%;
}

.navbar-inverse .navbar-inner {
    border: 0;
    box-shadow: none;
}

.navbar-inverse .brand {
    color: #232323;
}

 .navbar-inverse .nav > li > a{

    color: #232323;
    font-size: 15px;

}

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {

    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}



.maincontent {
    width: 100%;
    background-color: #6eb3d2;
    .container {
        padding-top: 2%;
    }
}

.title {
    padding-top: 5%;
    color: #313131; /* text color + color overlay */
    font-family: "Montserrat";
    font-size: 41px;
    font-weight: bold;
}

.intro {
    width: 70%;
    padding-top: 5%;
    color: #232222; /* text color + color overlay */
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;

}

.footer {


    background-color: #232323;
     height: 100%;
   width:100%;
   p {
    color: #fff;
   }
}

.register {
    margin-top: 6%;
    a {
        padding: 10px;
        color: #f6f6f6; // text color + color overlay
        font-family: "Montserrat";
        font-size: 16px;
        font-weight: bold;
        width: 242px;
        height: 61px;
        background-color: #1f7f5b; /* layer fill content + color overlay */
    }
    a:hover {
        text-decoration: none;
        background-color: #232323;
    }
}

编辑:我想要 .footer 垂直展开 Jsfiddle:http://jsfiddle.net/MckJB/

最佳答案

您需要什么浏览器支持？

如果你同意

  • Safari
  • Chrome
  • 火狐
  • Opera 12.1+
  • IE10+

您可以使用 Flexbox 轻松完成此操作。唯一的问题是它有点冗长，因为存在三种语法。

首先移除所有边距并将html 和body 设置为100% 高度和宽度(Firefox 需要设置宽度以修复元素不展开的错误正确):

html, body { 
    height: 100%; 
    width: 100%; /* needed to fix Firefox bug */
    margin: 0; 
}

接下来将主体设置为使用 flexbox 而不是常规盒模型。 Safari、旧版 Chrome 和 Firefox 使用旧语法。 IE10 使用中间语法，Opera 和现代 Chrome 使用新语法(后者有前缀):

body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

接下来我们需要让元素垂直堆叠而不是水平堆叠。同样，使用各种语法。将这些添加到您的 body 选择器中:

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

现在所有内容都将垂直放置，但所有元素都将具有默认值。我们希望页眉和页脚不会拉伸(stretch)，这样它们就可以保持原样。但是，我们希望主要内容拉伸(stretch)以填充可用空间，所以我们需要说元素是灵活的。在演示中我使用了一个文章元素，所以我做了以下事情:

article {
    background-color: #6EB3D2;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

值 1 表示占用一个单位的空间。由于没有其他元素是灵活的，这就是所有的空间。如果所有三个元素都使用 1，则可用空间将被平均分割并添加到元素的默认大小。

最终结果应如下所示:http://jsfiddle.net/Kf9TL/ (或 http://jsfiddle.net/Kf9TL/show 作为整页预览)。

这是你想要的吗？

关于html - 将div一直延伸到底部没有滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16553450/

上一篇：image - Drupal 背景照片

下一篇：html - 如何在没有绝对定位的情况下让导航栏 float 到容器div的左侧

相关文章：

javascript - 在新页面加载时保持滚动位置

html - 如何避免缩放 svgs 的 foreignObjects 中的元素？

jquery - 如何在 MVC 5 中将 bootstrap-datepicker 安装为组件？

javascript - 带有 Twitter Bootstrap 选项卡的表达式引擎 channel 条目不起作用

javascript - 有没有一种方法可以将每个文本区域自动调整为从数据库查询返回的数据的大小？

php - 如何将图像添加到此文本？

css - 添加其他 div 时，标题 div 会更改其位置

javascript - 当用户更改类型时添加新类

twitter-bootstrap - 带日期选择器的 Bootstrap 验证器不验证日期

html 转义，以及我如何获得所有权

©2024 IT工具网  联系我们