发表新帖
发表新帖

HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx

前端 未结
关注
4 1333
遥遥无期
遥遥无期 2020-12-07 10:55

I\'m trying to make following layout:

  +-------------------------------------------------+
  |       Header + search (Twitter navbar)          |
相关标签:
4条回答
  • 深忆病人
    2020-12-07 11:17

    if you use Bootstrap 2.2.1 then maybe is this what you are looking for.

    Sample file 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>
    File Content/Site.css
    body {
    padding-bottom: 70px;
    padding-top: 70px;
}

    0 讨论(0)
  • 孤城傲影
    2020-12-07 11:20

    Is this what you are looking for? Here is a fiddle demo.

    The layout is based on percentage, colors are for clarity. If the content column overflows, a scrollbar should appear.

    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;
}
    0 讨论(0)
  • 时光取名叫无心
    2020-12-07 11:21

    I know it's late in the day but might help someone else!

    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); 
}
    0 讨论(0)
  • 梦毁少年i
    2020-12-07 11:28

    I've found a post here on Stackoverflow and implemented your design:

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

    Here's the original post: https://stackoverflow.com/a/5768262/1368423

    Is that what you're looking for?

    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;
}
    0 讨论(0)
 看不清?
提交回复
热议问题