位置固定填充

我試圖讓兩個div在頁面底部粘在一起使用position：fixed。問題是，當我在#feedbackTab上填充填充時，它會從頁面底部向我想要的地方重複#feedbackTab。如何將#feedbackTab放在#feedbackBody之上，並將它們固定在頁面的底部？位置固定填充

#feedbackTab { 
background-image:url(../img/feedback_12.png); 
position:fixed; 
bottom:0px; 
padding-bottom:300px; 
margin:0; 
width:960px; 
height:34px; 
} 

#feedbackBody { 
background-image:url(../img/Feedback_bkg_14.png); 
position:fixed; 
bottom:0px; 
width:960px; 
height:292px; 
margin:0; 
} 

<div id="feedback"> 
     <div id="feedbackTab"></div> 
     <div id="feedbackBody"> 
      <div id="comments"> 
       <h2>Comments/Suggestions</h2> 
       <input class="commentsTxt" type="text" name="Comments"><br \> 
       <input id="commentsSubmit" type="submit" value="Submit"> 
      </div><!-- end comments --> 
      <div id="problems"> 
       <h2>Problems?</h2><br \> 
       <label id="email">Email:</label><input class="emailBox" type="text" name="Email"><br \> 
       <label id="problem">Problem:&nbsp;</label><input class="problemBox" type="text" name="Comments"><br \> 
       <input id="problemsSubmit" type="submit" value="Submit"> 
      </div><!-- end problems --> 
     </div><!-- end feedbackBody --> 
    </div><!-- end feedback -->

來源

2013-01-14 Scott

當你說「在頁面的底部粘在一起」，你能解釋一下你的意思是多一點？ – user1636130

所以#feedbackTab應該位於#feedbackBody的較高位置（ontop）。皮特，這是堆棧順序。我正在談論頁面上的垂直位置。我想將#feedbackTab的底部附加到#feedbackBody的頂部。 – Scott

我把它們放在一個容器div來容納一切融合在一起，像這樣：

CSS：

#tabContainer{ 
    width:700px; 
} 
.tab{ 
    width:100px; 
    text-align:center; 
    float:left; 
    margin-right:2px; 
} 
#feedbackTab{ 
    background-color:red; 
} 
#tab2{ 
    background-color:green; 
} 
#tab3{ 
    background-color:yellow; 
} 
#feedbackBody{ 
    clear:both; 
    width:100%; 
    height:500px; 
    background-color:blue; 
}

HTML：

<div id="tabContainer"> 
    <div id="feedbackTab" class="tab">FeedBack</div> 
    <div id="tab2" class="tab">Tab2</div> 
    <div id="tab3" class="tab">Tab3</div> 

    <div id="feedbackBody"> 
     This is the feedback body 
     <br/>lorem ipsum 
     <br/> 
     <input type="button" value="button"> 
    </div> 
</div> 
</body>

不幸的jsfiddle似乎是下降現在我不能嘲笑它或者爲你測試它。我希望這有助於！

編輯：我找到了一個替代試驗檯：http://cssdesk.com/y7Hb2

來源

2013-01-15 08:51:17 user1636130

位置固定填充

回答

相關問題