Question

我遇到了一个奇怪的问题，我无法弄清楚为什么我的标签和文章无法占据整个可用的高度位置。

基本上，我有一个不包含内容的部分和文章，但有一个隐藏的div（.news），只有当我们点击UP的链接时才能看到它。

据我所知，文章和章节标签没有得到高度值，我不明白为什么。

以下是我正在使用的代码：

编辑（添加代码）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sticky footer &middot; Twitter Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <!-- <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> -->
    <style type="text/css">
    html,body{
    height:100%
}

#wrap {
    min-height:100%;
    height:auto !import;
    height:100%;
    margin: 0 auto -60px;
    background-color:lightgray;
}

header {
    height:70px;
}

section {
    height:100%;
    min-height:100%;
}

article {
    position:relative;
    background-color:lightgreen;
    overflow:hidden;
    height:100%;
    min-height:100%;
}

article .news {
    width:100%;
    position:absolute;
    bottom:0;
    background-color:red;
}

#push, .footer {
    height:60px;
}

.footer {
    padding-top:35px;
    background-color:#a3a3a3;
}

    </style>
  </head>
  <body>

    <div id="wrap">
    <header>Header</header>
    <section>
        <article>
            <div class="news row-fluid">
                <div class="span12"><a href="#" class="btn">^</a></div>
                <div class="container">
                    <div class="span6">My News 1</div>
                    <div class="span6">My News 2</div>
                </div>
            </div>
        </article>
    </section>
    <div id="push"></div>
</div>
<footer class="footer">
    Footer
</footer>


  </body>
</html>

我没有使用jsfiddle.net，因为我的问题没有出现在那里。

制作整个高度可用的部分和物品

0 个答案: