Question

对于一个简单的聊天应用程序，我想到了使用这个简单的布局：

*----------------------------------*
|<div>                             |
|                                  |
|                                  |
|                                  |
+----------------------------------+
|<input type text>            |Send|
+----------------------------------+

即，在底部我们有一个表单，包含用于输入消息的文本字段以及用于发送消息的按钮。屏幕的其余部分应为<div>，其中显示消息。 <div>应占用剩余空间，文本字段应水平拉伸。

我的主要问题是拉伸div。无论我做什么，它似乎都没有延伸。我已经尝试将height设置为100％，尝试定位是绝对的，但没有帮助。有任何想法吗？

Answer 1

似乎是一个粘性页脚问题（您的输入是“页脚”）：

CSS：http://css-tricks.com/snippets/css/sticky-footer/

jQuery：http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

Answer 2

尝试以下内容：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #container {
                position: relative;
                width: 350px;
                height: 100%;
                background-color: pink;
            }
            #messages {
                height: 100%;
                width: 100%;
                background-color: blue;
            }
            #controls {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 30px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="messages"></div>
            <div id="controls">
            </div>
        </div>
    </body>
</html>

Answer 3

如果您将表单放在div中并将它们都设置为绝对值，那么应该这样做...这适用于Chrome，尚未在其他地方测试过：

HTML：

<div id="convo">
    <form id="talk" method="post" action="#">
        <input type="text" name="talk" />
        <input name="send" id="send" type="submit" value="Send" />
    </form>
</div>

CSS：

* {
    box-sizing: border-box;
    margin: 0 auto; padding: 0;
}

input[type=text] {
    width: 90%;
    height: 100%;
} 

#talk, #convo {
    position: absolute;
    width: 100%;
    border: 4px solid SteelBlue;
}

#talk {
    height: 7.5%;
    bottom: 0;
}

#convo {
    height: 100%;
    background-color: DarkSlateGray;
}

Answer 4

html {
        height: 100%;
    }
    body {

        width: 100%;
        height: 100%;

    }

    #yourdiv {
        width: 200;
        min-height: 100%;
        height: auto !important;
        height: 100%;
    }

你可以使用#youdiv height中的任何一个。

如何实现这样的布局？

4 个答案:

HTML：

CSS：