Question

嘿伙计我正在建立一个网络聊天，我的第一个目标是整理html页面。我正在使用BootStrap 3网格，所以每当我调整屏幕宽度时，我的元素都会根据屏幕大小进行调整。但是，当我调整屏幕高度时，BootStrap网格不起作用，因此我的按钮被切断，我无法找到解决这个问题的方法。我尝试使用git hub（https://gist.github.com/metaist/7632393）中的库，但它也没有解决我的问题......

这是我的代码：

HTML：

<body>
    <div class="container">

        <div class="row" id="top-div">
            <!-- The users username -->
            <h1 class="text-primary">Placeholder Username</h1>
        </div>


        <div class="row" id="chat-and-users">
            <div class="form-group" id="middle-div">
                <div>
                    <div class="col-xs-9 bg-info" id="chat-column">
                        <!-- Chat Column -->
                    </div>
                    <div class="col-xs-3 bg-success" id="users-column">
                        <!-- Users Column -->
                    </div> 
                </div>
            </div>
        </div>


        <div class="row" id="bottom-div">
            <form action="">
                <div class="form-group">
                    <input type="text" id="message-input" class="form-control" placeholder="Type a message...">
                </div>   
                <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
            </form>
        </div>

    </div>
</body>

CSS：

body{
    background-color: #E5E5E5;
}

#chat-and-users{
    border-radius: 3px;
    border: 1px solid #202020;
}

#chat-column{
    height: 80vh;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-right: 1px solid #202020;
}

#users-column{
    height: 80vh;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #202020;
} 

#bottom-div {
    margin-top: 15px;
}

这就是我的页面看起来如何，请注意即使我将我的文档（我的应用程序）减少到最小尺寸，我也看不到整个按钮...

[！[在此处输入图像说明] [1]] [1]

我希望h1占据页面的10％，蓝色/绿色矩形占页面的80％（因此我给它们的高度为80 vh），输入/按钮形成页面的10％。任何形式的帮助表示赞赏！

Answer 1

添加：

html, body, .container {
    height: 100%;
}

#top-div, #bottom-div {
    height: 10%;
}

#chat-and-users {
    height: 80%;
}

从height: 80vh和#chat-column

中删除#users-column

vh与您的viewport相关。这就是为什么在调整窗口大小时它不会改变的原因。另一方面，%相对于父元素，在本例中为body，其高度为100%现在

Answer 2

将页眉和页脚高度设置为10vh的问题是，当视口较短时，其内容可能会超出该高度，就像屏幕截图中的情况一样。

我可以建议一种不同的方法：将页眉和页脚设置为固定高度，然后缩放列以填充剩余的可用空间：

#top-div,
#bottom-div {
    /* change this to whatever you want */
    height: 100px;
}
#chat-column,
#users-column {
    /* viewport height minus combined height of header & footer  */
    height: calc(100vh - 200px); 
}

html页面中的样式元素可根据屏幕大小动态调整

2 个答案: