Question

我需要将下半部分（形状）固定在底部，而它上面的部分是流动的。（聊天区）

我设法将表单固定在底部，但是当我需要它停止表单开始的地方时，聊天区域部分就在后面。

CSS

.page{
 min-height: 100%
}
#chatBox{
 overflow:scroll;
 position: absolute;
}
.formTextareaWrap{
 padding-left:10px;
 padding-right:10px;
}
#formArea{
 clear: both;
 margin-top: -160px;
 height:160px;
 background-color:#fff;
}

HTML

        <!-- Page Content-->
        <div class="content pageHome page">
            <div id="chatBox">
                <em class="speach-left-title">John Doe says:</em>
                <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>

                <div class="clear"></div>

                <em class="speach-right-title">Jane Doe replied:</em>
                <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>

                <div class="clear"></div>

                <em class="speach-left-title">John Doe says:</em>
                <p class="speach-left">Awesome stuff!</p>

                <div class="clear"></div>

                <em class="speach-right-title">Jane Doe replied:</em>
                <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>


            </div>
        </div>
        <div id="formArea">
            <form action="php/contact.php" method="post" class="contactForm" id="contactForm">
                <fieldset>

                    <div class="formTextareaWrap">
                        <label class="field-title contactMessageTextarea" for="contactMessageTextarea">Message: <span>(required)</span></label>
                        <textarea name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea"></textarea>
                    </div>
                    <div class="formSubmitButtonErrorsWrap" style="padding-left:10px;padding-right:10px;">
                        <input type="submit" class="buttonWrap button button-green contactSubmitButton" id="contactSubmitButton" value="SUBMIT" data-formId="contactForm"/>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

Answer 1

我最后只在#chatBox的底部添加了160px填充。这使得文本不应该在不应该的形式下进行。

形式固定到底部，而内容也是流动的

1 个答案: