Css 如何实现这样的布局？_Css

Css 如何实现这样的布局？

css

Css 如何实现这样的布局？,css,Css,对于一个简单的聊天应用程序，我考虑使用以下简单布局： *----------------------------------* |<div> | | | | | | | +-------------------------------

对于一个简单的聊天应用程序，我考虑使用以下简单布局：

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

*----------------------------------*
|                             |
|                                  |
|                                  |
|                                  |
+----------------------------------+
||发送|
+----------------------------------+

i、例如，在底部我们有一个表单，由一个用于输入消息的文本字段和一个用于发送消息的按钮组成。屏幕的其余部分应为显示信息的

。

应占据剩余空间，文本字段应水平延伸

我的主要问题是拉伸div。无论我做什么，它似乎都不会拉伸。我尝试将高度设置为100%，尝试将位置设置为绝对，但没有帮助。有什么想法吗

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

CSS:

jQuery:

尝试以下方法：

<!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>


html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#容器{
位置：相对位置；
宽度：350px；
身高：100%；
背景颜色：粉红色；
}
#信息{
身高：100%；
宽度：100%；
背景颜色：蓝色；
}
#控制{
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
高度：30px；
背景颜色：黄色；
}

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

如果您将表单放在div中，并将它们都设置为绝对值，则应该可以。。。这在Chrome中有效，在其他地方没有测试过：

HTML:

您在拉伸输入文本字段时遇到问题吗？请使用position absolute，底部为：x；其中x是文本框输入的高度。

html {
        height: 100%;
    }
    body {

        width: 100%;
        height: 100%;

    }

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

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

* {
    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;
}