我试图使用position:fixed让两个div在页面底部粘在一起。问题是当我在 #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: </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 -->
最佳答案
我会将它们放在一个容器 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
关于html - 位置固定填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14322714/