Question

我正在开发一个简单的聊天网络应用。这个应用程序有2个独立的垂直列。左边一个用于简单的消息聊天，另一个用于上传各种媒体以与他人共享。

每列必须在底部放置自己的输入表单。在我设置css属性之前，两个输入表单看起来像这个图像

之后，我添加了这个css代码{position：fixed;底部：0像素}。因此，输入形式会下降，但会出现一些问题。输入表单的宽度不会填充每列的宽度。

为什么会这样？我该如何解决这个问题？

我附上了我的html＆amp; css代码。我使用了twitter bootstrap的网格系统。等你帮忙。感谢。

<!DOCTYPE html>
<html>
<head>
    <title></title>


    <link rel="stylesheet/less" href="../node_modules/bootstrap/less/scaffolding.less">

<style type="text/css">

    html, body, #container { width : 100%; height : 100%;}

    form>div:nth-child(1) { padding-right:0px; }
    form>div:nth-child(2) { padding-left:0px; }

    #talk>form { position:fixed; bottom:0px; }
    #media>form { position:fixed; bottom:0px;}

</style>
</head>
<body>
    <div class="container-fluid">

    <div id="talk" class="col-sm-6 col-md-6">
        <ul id="messages" class="list-unstyled"></ul>
        <form action="" class="row" width="100%">

            <div class="col-md-10 col-sm-10">
                <input id="m" type="text" autocomplete="off" class="form-control" placeholder="write message" />
            </div>
            <div class="col-md-2 col-sm-2">
                <input type="submit" class="btn btn-primary" value="Send" >
            </div>

        </form>
    </div>


    <div id="media" class="col-sm-6 col-md-6">
        <ul class="media-contents" class="list-unstyled"></ul>
        <form action="" class="row">
            <div class="col-md-10 col-sm-10">
                <input type="file" class="form-control" accept="image/*"/>
            </div>  
            <div class="col-md-2 col-sm-2">
                <input type="submit" class="btn btn-warning " value="Upload" >
            </div>
        </form>

    </div>

</div>
</html>

底部0px属性在CSS中意外修改宽度

0 个答案: