区画は同じ高さではありません

私は<div>の3つのページが互いに隣り合っているページを得ようとしており、ページの最後には4番目の<div>が表示されます。そのすべては、スクロールせずに表示する必要があります、なぜ私はビューフィールドを使用するために100vhと100vwを使用しています。それは3つすべて<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; 
 
\t width: 30%; 
 
\t margin: 10px; 
 
\t 
 
}

<?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> \t <!--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"> 
 
\t This demo provides the possibility to control Philips Hue lamps via a HbbTV-Application. 
 
</div> 
 

 
</body> 
 

 
</html>

？

出典

2017-07-13 DaPole

あなたがする探しているすべては、任意のスクロールせずにビューポート内のすべての要素を取得（およびgetの場合上の3つのdivの高さが同じ場合）、overflow: hidden;を#inputpanel,#selectpanel,#colorpanelのスタイルに追加できます。しかし、最初の2つのdivの内容をその要素の先頭にプッシュします。

しかし、Flexboxを使用して、可能性がある場合に発生する可能性のある数多くの位置決め問題を解決することをお勧めします。ここで

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

あなたはフレキシボックスルート行くことにした場合の出発点である：

まず、あなたは別のdivであなたのトップ3の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; 
}

出典

2017-07-13 18:08:41

トリックを行った。トップコンテナを作ることは、最初から良い最初のステップでした。 – DaPole

あなたはフロートを使用して、フッターに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; 
}

JFiddle example here.

出典

2017-07-13 18:00:37

区画は同じ高さではありません

答えて

関連する問題