2

position：fixedを使用して、ページの下部に2つのdivを貼り付けようとしています。問題は、＃feedbackTabにパディングを配置すると、ページの下部から目的の場所まで#feedbackTabが繰り返されることです。#feedbackBodyの上に#feedbackTabを配置し、両方をページの下部に固定するにはどうすればよいですか？

#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 -->
4

1 に答える 1

3

私はそれらをコンテナ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-15T08:51:17.640 に答える