所以我试着用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/我需要圆形边框，因此...
这是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 */

任何帮助都是感激的...谢谢...
编辑：
感谢安德里亚·利吉奥斯的小提琴!
http://jsfiddle.net/RPFcN/2/
可以很好地与Firefox，但不工作在Chrome上...

4条答案

按热度按时间

zqdjd7g91#

您可以将以下代码放在侧面板元素中：

.user-panel {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    ...
    // Rest of the properties
}

希望这有帮助：）

赞(0）回复(0）举报 2023-01-22

cx6n0qe32#

可以使用calc（）CSS3函数。
看这里：http://jsfiddle.net/RPFcN/2/
指定display: inline-block以保持块按行显示，但具有块元素行为;
然后将user-panel的height设置为100%减去页眉和页脚的高度、边距和边框（总计：98像素）。
“内容”的高度将是100%减去94 px，因为内容没有边框（而用户面板有1 px的边框）。
EDIT：然后从 Package 器类中删除height: auto !important

bf1o4zei3#

我做这件事的方法是...
超文本：

<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 */
}

vlf7wbxs4#

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

css 使用Bootstrap创建两列100%布局

4条答案

相关问题

热门标签

最新问答