首页 文章

使用Bootstrap创建两列100％布局

提问于
浏览 次
7

所以我试图用twitter bootstrap和Ryan Fait的粘性页脚创建一个布局

<body>
<div class="wrapper">
    <div class="header">
</div>
    <div class="user-panel">
    <h1>Side Panel</h1>
</div>

    <div class="content">
        Hello World!
    </div>

    <div class="push"></div>
</div>
<div class="footer">
</div>
</body>

我似乎无法将用户面板和内容扩展到100％的高度，试过这些，但它们不起作用：

http://www.sitepoint.com/forums/showthread.php?868712-100-height-sidebar-background

http://fiddle.jshell.net/teresko/UG8Rk/show/ I need the rounded borders so...

这是CSS ......

/* Header */
.header {
    height: 40px;
    margin-top: 0px;

    border: 1px solid #999;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    -webkit-box-shadow: #666 0px 1px 1px;
    -moz-box-shadow: #666 0px 1px 1px;
    box-shadow: #666 0px 1px 1px;
    background: #F3F3F1;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
    background: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
    background: -moz-linear-gradient(#F3F3F1, #2B2B2B);
    background: -ms-linear-gradient(#F3F3F1, #2B2B2B);
    background: -o-linear-gradient(#F3F3F1, #2B2B2B);
    background: linear-gradient(#F3F3F1, #2B2B2B);
    -pie-background: linear-gradient(#F3F3F1, #2B2B2B);
    behavior: url(/PIE.htc);
}
/* End of Header */

/* Footer */
.footer {
    margin-top: 12px;
    background-color: #000;

    margin-bottom: 0px;
    margin-right: 20px;
    margin-left: 20px;
    clear: both;
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    -webkit-box-shadow: #666 0px 1px 1px;
    -moz-box-shadow: #666 0px 1px 1px;
    box-shadow: #666 0px 1px 1px;
    background: #F3F3F1;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
    background: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
    background: -moz-linear-gradient(#F3F3F1, #2B2B2B);
    background: -ms-linear-gradient(#F3F3F1, #2B2B2B);
    background: -o-linear-gradient(#F3F3F1, #2B2B2B);
    background: linear-gradient(#F3F3F1, #2B2B2B);
    -pie-background: linear-gradient(#F3F3F1, #2B2B2B);
    behavior: url(/PIE.htc);
}
/* End of Footer */

/* Sticky footer by Ryan Fait... with a little customization*/
* {
    margin: 0;
}

html,body {
    height: 100%;
}

.wrapper {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.push {
    height: 40px;
    clear: both;
}
/* End of Sticky footer*/

/* User Panel ( that sidepanel on the left side with navigation etc) */
.user-panel {
    border: 1px solid #999;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: #666 0px 1px 1px;
    -moz-box-shadow: #666 0px 1px 1px;
    box-shadow: #666 0px 1px 1px;
    background: #F3F3F1;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F3F3F1), to(#2B2B2B) );
    background: -webkit-linear-gradient(#F3F3F1, #2B2B2B);
    background: -moz-linear-gradient(#F3F3F1, #2B2B2B);
    background: -ms-linear-gradient(#F3F3F1, #2B2B2B);
    background: -o-linear-gradient(#F3F3F1, #2B2B2B);
    background: linear-gradient(#F3F3F1, #2B2B2B);
    -pie-background: linear-gradient(#F3F3F1, #2B2B2B);
    behavior: url(/PIE.htc);
    width: 175px;
    float: left;
    height: inherit;
    background: gray;
}
/* End of User Panel */

任何帮助表示赞赏...谢谢......

编辑：

感谢Andrea Ligios的小提琴！

http://jsfiddle.net/RPFcN/2/

适用于Firefox，但不适用于Chrome ...

html css layout web

4 回答

  • 0

    将 display:inline-block 添加到 .user-panel 和 .wrapper

    回复于
  • 1

    您好，早上好Kevin！，将此代码放在您的侧面板元素中

    display: block;
position:absolute;
height:auto;
bottom:0;
top:0;

    希望这可以帮助 ：）

    回复于
  • 1

    你可以使用calc（）CSS3函数 .

    看这里：http://jsfiddle.net/RPFcN/2/

    您指定 display: inline-block 以保持块显示在行中，但具有块元素行为;

    然后将 user-panel 的 height 设置为100％减去页眉和页脚的高度，它们的边距和边框（总计：98px） .

    “内容”的高度将为100％减去94px，因为内容没有边框（而用户面板有1px的边框） .

    编辑：并从包装类中删除 height: auto !important

    回复于
  • 0

    我以前用这个方法工作的方式是......

    HTML：

    <footer>
  <div class="container">
    <p class="text-muted">Footer text you want here.</p>
  </div>
</footer>

    CSS：

    html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 8em; /* Must be set to the same as footer height */
}
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8em; /* Must be set at the same as margin-bottom in body */
}
    回复于

相关问题