Div不在同一高度上
Div不在同一高度上
提问于 2017-07-14 01:49:43
我试图得到一个页面，有三个<div>的应该是相邻的，在页面的底部应该显示第四个<div>。所有这些应该是可见的不滚动，为什么我使用100vh和100vw只使用视场。但它把所有三个<divs>在不同的高度。
它将是一个HbbTV应用程序，这就是为什么全屏是很重要的。
html,body { margin:0; padding: 0; }
#inputpanel {
width: calc(40vw - 10px);
}
#selectpanel {
width: calc(20vw - 10px);
}
#colorpanel {
width: calc(40vw - 10px);
}
#inputpanel,#selectpanel,#colorpanel {
display: inline-block;
box-sizing: border-box;
height: calc(100vh - 200px);
margin: 0;
padding: 0;
}
.b_footer {
padding: 10px;
height: 200px;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}
.colorbuttons {
background-color: #0000ff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 30%;
margin: 10px;
}<?xml version="1.0" encoding="UTF-8" ?>
<!--As DOCTYPE either the strict XHTML declaration or "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd" shall be used as described in the HbbTV-standard: A.2.6.2.-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Required XML-namespace as described in the HbbTV-standard: A.2.6.2.-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <!--Required MIME content type as described in the HbbTV-standard: A.2.6.2.-->
<meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" />
<!--script type="text/javascript" src="hueapi.js"/-->
<link rel="stylesheet" href="DemoHbbtvHue.css"/>
<title>Demo for HbbTV and Hue</title>
</head>
<body>
<div id="inputpanel">
Step1: Enter IP or use DummySystem.
<button type="button" id="dummy" onclick="enteringDummySystem()">DummySystem</button><br />
<br />
NOTE: Please press the button on your Hue-Bridge before clicking on "Search"<br />
IP: <input type="text" id="inIP" />
<button type="button" id="buIP" onclick="searchDevices('Lamp', 'Hue', document.getElementById('inIP').value)">Search</button><br />
<button type="button" id="getIds" onclick="getId()">Get Light IDs</button>
<button type="button" id="createBut" onclick="createButton(function(){
alert('it works');})">create Button</button>
</div>
<div id="selectpanel">
gfsd
</div>
<div id="colorpanel">
<button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor(0.1684,0.0416)">Blue</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor(0.6549,0.3126)">Red</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor()">White</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor()">Green</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor()">Yellow</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor()">Pink</button><br />
</div>
<div class="b_footer">
This demo provides the possibility to control Philips Hue lamps via a HbbTV-Application.
</div>
</body>
</html>
我可以改变什么来实现我正在寻找的东西？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-14 02:08:41
如果你想做的就是在没有任何滚动的情况下获得视区中的所有元素(并获得相同高度的前三个div)，你可以将overflow: hidden;添加到#inputpanel,#selectpanel,#colorpanel样式中。不过，这确实会将前两个div上的内容推到该元素的顶部。
然而，我建议使用Flexbox来解决一些你可能会遇到的定位问题。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
如果你选择Flexbox路线，这里是一个起点：
首先，您需要将前三个div包装在另一个div中。类似<div class="top-container">的东西-请看下面添加到top-container中的样式。
html,body {
margin:0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
.top-container {
display: flex;
flex-direction: row;
align-items: flex-end;
height: calc(100vh - 200px);
}
#inputpanel {
width: calc(40vw - 10px);
}
#selectpanel {
width: calc(20vw - 10px);
}
#colorpanel {
width: calc(40vw - 10px);
}
#inputpanel,#selectpanel,#colorpanel {
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.b_footer {
padding: 10px;
height: 200px;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}
.colorbuttons {
background-color: #0000ff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 30%;
margin: 10px;
}Stack Overflow用户
发布于 2017-07-14 02:00:38
你可以使用浮点数并在页脚中添加100%的宽度：
#inputpanel,#selectpanel,#colorpanel {
display: inline-block;
float: left;
box-sizing: border-box;
height: calc(100vh - 200px);
margin: 0;
padding: 0;
}
.b_footer {
float: left;
padding: 10px;
height: 200px;
width: 100%;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45087772
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号