將元素的高度設置爲％高度的元素高度

我想將元素聊天箱的高度設置爲元素視頻盒的高度。但我不知道該怎麼做。我希望你可以幫助我 ;）。如果你沒有使用JavaScript給我一個方法，我也會很好。將元素的高度設置爲％高度的元素高度

代碼：

#content { 
 
    width: 80%; 
 
    max-width: 1300px; 
 
    min-width: 900px; 
 
    margin: 80px auto; 
 
} 
 
#stream { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    display: flex; 
 
} 
 
#video { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="content"> 
 
    <div style="width:75%;display:inline-block;vertical-align:top;" id="videobox"> 
 
    <div id="stream"> 
 
     <iframe id="video" src="http://player.twitch.tv/?channel=marmeladenoma" height="720" width="1280" frameborder="0" scrolling="no" allowfullscreen="true"> 
 
     </iframe> 
 
    </div> 
 
    </div> 
 
    <div style="width:25%;float:right;display:inline-block;background-color:rgb(3, 40, 74)" id="chatbox"> 
 
    hi 
 
    </div> 
 
</div>

感謝您的幫助:)

來源

2016-11-09 AlfredMeier

剛剛成立的#content的display到flex然後的#chatbox的height到inherit。那就是：

#content { 
    display: flex; 
    ... 
} 

#chatbox { 
    height: inherit; 
    ... 
}

因此，在全所得到的樣式規則是：

#content { 
    display: flex; 
    width: 80%; 
    max-width: 1300px; 
    min-width: 900px; 
    margin: 80px auto; 
} 
#stream { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    width: 100%; 
    height: auto; 
    display: flex; 
} 
#video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#chatbox { 
    height: inherit; 
}

來源

2016-11-09 16:47:59 Maviza101

如果你不知道videobox的高度（因爲它是可變的），不能設置它明確地在CSS中，你必須使用JavaScript來幫助獲得videobox的高度並將chatbox設置爲相同。下面是使用jQuery一個簡單的例子：

window.onload = function() { 
    var h = $('#videobox').outerHeight(); 
    $('#chatbox').css('height', h); 
};

http://codepen.io/paulcredmond/pen/WoQdPz

否則，你可以使用flexbox與stretch爲您排憂解難。請參閱：

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

來源

2016-11-09 16:37:42

如果你可以把兩個元素在同一個父DIV。

然後，您可以設置包含div的高度，並在兩個元素上使用高度：100％。

如果不能將它們放在同一個div中，則必須使用javascript或將兩個元素的高度設置爲精確的像素數。

來源

2016-11-09 16:41:53 RobPethi

將元素的高度設置爲％高度的元素高度

回答

相關問題