創建具有引導

兩列100％佈局

所以我試圖創建一個Twitter的引導和Ryan既成事實的粘頁腳佈局創建具有引導

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

任何幫助表示讚賞...謝謝...

編輯：

感謝安德烈Ligios的小提琴！

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

與Firefox效果很好，但對瀏覽器不工作...

來源

2012-10-30 Kevin D.

你好你好，早上好！凱文地方這個代碼的側板元素中

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

希望這有助於:)

來源

2012-10-31 01:57:34 TheFrustratedProgrammer

嗨，你好，早上好，我親愛的同事，從我的立方體。謝謝......我調整了一些值來解釋頁眉和頁腳高度。它的工作，謝謝。 –

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

來源

2012-10-30 10:47:02

沒有工作：/抱歉。 –

您可以使用計算（）CSS3功能。

在這裏看看：http://jsfiddle.net/RPFcN/2/

您指定display: inline-block保持線顯示的塊，但與塊元素的行爲;

然後，您將user-panel的height設置爲100％減去頁眉和頁腳的高度，邊距和邊框（總計：98px）。

「內容」的高度爲100％減去94px，因爲內容沒有邊框（而用戶面板有1px的邊框）。

編輯：你從包裝類中刪除height: auto !important

來源

2012-10-30 12:55:10

適用於Firefox，側邊欄和內容在Chrome中仍然不是100％的高度...另外，有沒有其他的方式來做到這一點，而不使用CSS3？ –

我用來完成這項工作的方式是...

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

來源

2016-01-06 00:10:03

創建具有引導

回答

相關問題