HTML/CSS需要div來取父

我想創造這個小提琴代表的網頁的垂直高度爲100％......HTML/CSS需要div來取父

我想換左手垂直線在選項卡下的導航畫在坐在頁面底部的頁腳的頂部。

頁腳功能需要保留。這就是說，如果頁面內容不佔用整個頁面，則頁腳仍保留在底部。如果頁面內容超過視口的高度，頁腳會被壓低。

任何人都可以解決這個問題嗎？這確實是一個挑戰。

HTML

<div class="wrapper"> 
    <div class="header"> 
     HEADER 
    </div> 
    <div class="body"> 


     <ul class="nav nav-tabs" id="tabcontrol"> 
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane active" id="home" style=""> 
       <div class="navigation" style=""> 
        navigation<br /> 
        navigation<br /> 
        navigation<br /> 
       </div> 
       <div class="content"> 
        content 
       </div> 
      </div> 
     </div> 


    </div> 
    <div class="push"> 
    </div> 
</div> 
<div class="footer center"> 
    <div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"></div> 
    <div> 
     FOOTER 
    </div> 
</div>

CSS

.body { 
    border: 1px solid rgb(174, 174, 201); 
    border-top: 5px solid rgb(174, 174, 201); 
    border-bottom: 5px solid rgb(174, 174, 201); 
    border-left: 2px solid rgb(174, 174, 201); 
    border-right: 2px solid rgb(174, 174, 201); 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
} 

/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */ 
* { 
    margin: 0; 
} 

html, body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -50px auto; /* the bottom margin is the negative value of the footer's height */ 
    overflow: hidden; 
} 

.footer { 
    height: 50px; 
    background-color: #f8f8f8; 
} 

.footer, .push { 
    height: 50px; /* .push must be the same height as .footer */ 
    clear: both; 
} 

form { 
    height: 100%; 
} 
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */ 

.navigation { 
    float: left; 
    width: 150px; 
    border-right: 3px solid rgb(174, 174, 201); 
    padding-top: 10px; 
    white-space: nowrap; 
} 

.content { 
    padding-top: 10px; 
} 

.nav { 
    margin-bottom: 0px; 
}

來源

2013-04-10 John Livermore

不知道爲什麼你把導航一組選項卡里面，但你可以使用引導手風琴而不是簡單的 – 2013-04-10 21:57:56

也許吧，但是我忽略了實際的HTML來簡化和強調我正在嘗試做的事情。也許如果你看到了實際的頁面，設計可能會更有意義。也許不是！ :) – 2013-04-11 16:14:14

發佈整頁鏈接可能會有所幫助。那裏可能會有更好的用戶體驗解決方案。我個人不是小部件內部的小部件的粉絲。它隱藏了用戶的內容 – 2013-04-11 20:15:17

OK完成。

你只需要讓你的色譜柱定位，然後調整其餘部分。
這裏是你必須添加爲了使這項工作的代碼。

.navigation { 

    position:absolute; 
    bottom:50px; 
    top:65px; 
     } 
.content { 
    margin-left:160px; 
}

和here是更新後的提琴（我犯了一個紅色的頁腳，使其更可見）
希望這有助於
歡呼

來源

2013-04-10 22:10:23 Yenn

如果我知道你想什麼，你需要做一個虛假的列！

http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

:)希望這可以幫助和回答你的問題

來源

2013-04-10 22:02:07 jhon

是的，這可能工作，但我正在尋找一個純CSS解決方案，而不需要圖像黑客。另外，這個左側導航div嵌入在一個標籤上，所以在這種特殊情況下，虛擬列方式的概率將不起作用。 – 2013-04-10 22:05:37

HTML/CSS需要div來取父

回答

相關問題