HTML和CSS + Twitter的引导：全页面布局或高度100％ - NPX

我试图做以下布局：HTML和CSS + Twitter的引导：全页面布局或高度100％ - NPX

+-------------------------------------------------+ 
    |  Header + search (Twitter navbar)   | 
    +------------+------------------------------------+ 
    |   |         | 
    |   |         | 
    |Navigation |   Content column    | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    +------------+------------------------------------+ 
    |    Footer        | 
    +-------------------------------------------------+

布局必须采取一切可用高度&宽度，导航和内容列会占用所有可用空间，并在溢出时滚动，页脚应粘到底部。

HTML看起来像现在这样：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Bootstrap 101 Template</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> 
    <link href="css/app.css" rel="stylesheet" media="screen"> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="navbar"> 
     <!-- navbar content --> 
     </div> 

     <div class="row-fluid columns"> 
     <div class="span2 article-tree"> 
      <!-- navigation column --> 
     </div> 
     <div class="span10 content-area"> 
      <!-- content column --> 
     </div> 
     </div> 

     <div class="footer"> 
     <!-- footer content --> 
     </div> 
    </div> 
    </body> 
</html>

CSS：



body, html, .container-fluid { /// take all available height 
    height: 100%; 
} 

.article-tree { 
    color: #DCE6E5; 
    background: #2F323B; 
} 

.content-area { 
    overflow: auto; 
    height: 100%; /// explicit height to make scrolling work 
} 

.columns { 
    height: 100%; /// columns should take all height 
    margin-top: 42px; /// minus header 
    margin-bottom: 20px; // minus footer 
} 

.columns > div { 
    height: 100%; // make each column to take all available height 
} 

.footer { 
    background: red; 
    height: 20px; 
}

理论上它应该工作，但是我希望columns.margin不起作用。我认为它应该使高度= 100％ - 马金，但它只是移动容器。

我google了一下，看到了很多关于StackOverflow的问题。所有这些都包括JavaScript或位置：绝对和手动定位。恕我直言，他们比解决方案更黑客，我认为应该有一些更简单，更优雅和跨浏览器的方式来解决这个问题。

那么我怎么做上面描述的布局？也许Bootstrap可以帮助我（我已经浏览过文档，但没有提到这种情况）？

来源

2013-01-06 Daniel

好的问题。 –

我发现一个帖子在这里＃2和实现您的设计：

http://jsfiddle.net/bKsad/25/

以下是原帖：https://stackoverflow.com/a/5768262/1368423

这就是你想要的？

HTML：

<div class="container-fluid wrapper"> 

    <div class="row-fluid columns content"> 

    <div class="span2 article-tree"> 
     navigation column 
    </div> 

    <div class="span10 content-area"> 
     content column 
    </div> 
    </div> 

    <div class="footer"> 
    footer content 
    </div> 
</div>

CSS：

html, body { 
    height: 100%; 
} 
.container-fluid { 
    margin: 0 auto; 
    height: 100%; 
    padding: 20px 0; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.columns { 
    background-color: #C9E6FF; 
    height: 100%; 
} 

.content-area, .article-tree{ 
    background: #bada55; 
    overflow:auto; 
    height: 100%; 
} 

.footer { 
    background: red; 
    height: 20px; 
}

来源

2013-01-06 06:15:26 belens

没有工作:(http://jsfiddle.net/B9sMw/ - 滚动条那里+一些奇怪的间距上方的导航栏（见评论，我试过几个方法） – Daniel

我只是使导航栏绝对。知道你试图避免这种情况，但在这种情况下，它是非常优雅的imho。http://jsfiddle.net/B9sMw/1/ – belens

确实。嗯，啊让它:)谢谢你的帮助！ – Daniel

这是你在找什么？这里是一个小提琴demo。

布局基于百分比，颜色是为了清晰。如果内容列溢出，应该会出现一个滚动条。

body, html, .container-fluid { 
    height: 100%; 
} 

.navbar { 
    width:100%; 
    background:yellow; 
} 

.article-tree { 
    height:100%; 
    width: 25%; 
    float:left; 
    background: pink; 
} 

.content-area { 
    overflow: auto; 
    height: 100%; 
    background:orange; 
} 

.footer { 
    background: red; 
    width:100%; 
    height: 20px; 
}

来源

2013-01-06 06:23:08 fbynite

这将无法正常工作，并已在jsfiddle中看到：你有滚动条，因为导航栏高度+列高度（100％）+页脚高度> 100％ – Daniel

我知道这是晚了，但可能会帮助别人！

body,html { 
    height: 100%; 
} 

.contentarea { 

/* 
    * replace 160px with the sum of height of all other divs 
    * inc padding, margins etc 
    */ 
    min-height: calc(100% - 160px); 
}

来源

2014-06-17 21:48:49

不知道calc！浏览器支持并不好，但它在Chrome和Firefox中运行得非常好。 – Johnride

如果您使用Bootstrap 2.2.1，那么也许这是你在找什么。

样品index.html文件

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="Content/Site.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <menu> 
 
     <div class="navbar navbar-default navbar-fixed-top"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
        <a class="navbar-brand" href="/">Application name</a> 
 
       </div> 
 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
         <li><a href="/">Home</a></li> 
 
         <li><a href="/Home/About">About</a></li> 
 
         <li><a href="/Home/Contact">Contact</a></li> 
 
        </ul> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li><a href="/Account/Register" id="registerLink">Register</a></li> 
 
         <li><a href="/Account/Login" id="loginLink">Log in</a></li> 
 
        </ul> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
    </menu> 
 

 
    <nav> 
 
     <div class="col-md-2"> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
     </div> 
 

 
    </nav> 
 
    <content> 
 
     <div class="col-md-10"> 
 

 
       <h2>About.</h2> 
 
       <h3>Your application description page.</h3> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <hr /> 
 
     </div> 
 
    </content> 
 

 
    <footer> 
 
     <div class="navbar navbar-default navbar-fixed-bottom"> 
 
      <div class="container" style="font-size: .8em"> 
 
       <p class="navbar-text"> 
 
        &copy; Some info 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </footer> 
 

 
</body> 
 
</html>

文件内容/网站。css

body { 
 
    padding-bottom: 70px; 
 
    padding-top: 70px; 
 
}

来源

2014-09-27 13:55:09

HTML和CSS + Twitter的引导：全页面布局或高度100％ - NPX

回答

相关问题