根据可用空间调整元素的大小，同时保持比例

我试图制作嵌入我的twitch.tv流和聊天的网站。根据可用空间调整元素的大小，同时保持比例

我希望将聊天固定到页面的特定宽度并使用其所有垂直空间。而实际的流使用剩余的水平空间，同时保持相同的宽高比，所以没有任何黑色边框。

以下基本教程后，这是我想出了这么远：

<html> 

<head> 
<title>Twitch Stream</title> 
<style type="text/css"> 
    #chat { 
     float:left; 
     width:350px; 
     height:100%; 
     background-color:#ff0000; 
    } 
    #stream { 
     position:fixed; 
     float:right; 
     width: 100%; 
     background-color:#00FF00; 
    } 
</style> 
</head> 
<body> 
<div> 
<iframe id="chat" src="http://www.twitch.tv/twitch/chat?popout=" frameborder="0" scrolling="no" height="500" width="350"></iframe> 
<iframe id="stream" src="http://www.twitch.tv/twitch/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe> 
</div> 
</body> 
</html>

林可能要对这个错误的方式，任何帮助，将建议

来源

2015-07-12 Metakun

我更新了我的答案。你可以看看 – Trix

请看看代码片段结果，并告诉我这是不是你要找的。如果不是，请详细解释。

#chat{ 
 
    position: fixed; 
 
    width: 350px; 
 
    height: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #ff0000; 
 
} 
 
#stream{ 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 350px; 
 
    background-color: #00FF00; 
 
}

<html> 
 
<head> 
 
    <title>Twitch Stream</title> 
 
</head> 
 
<body> 
 
    <div> 
 
    <iframe id="chat" src="http://www.twitch.tv/twitch/chat?popout=" frameborder="0" scrolling="no"></iframe> 
 
    <iframe id="stream" src="http://www.twitch.tv/twitch/embed" frameborder="0" scrolling="no"></iframe> 
 
    </div> 
 
</body> 
 
</html>

来源

2015-07-12 21:48:56 Trix

他希望聊天是具体的宽度 –

是的我更新了我的答案 – Trix

嗨，这项工作完美，除了流离开屏幕，我希望流自动调整大小，以便它适合所有显示器，同时仍然保持比例，谢谢。 – Metakun

如果我理解你的问题很好这是你的答案。你把你的＃聊天信息留下，并让#stream去剩下页面空间。

<style type="text/css"> 
    #chat { 
     position:absloute; 
     top:0; 
     left:0; 
     width:350px; 
     height:100%; 
     background-color:#ff0000; 
    } 
    #stream { 
     position:relative; 
     margin-right:350px; 
     width: auto; 
     background-color:#00FF00; 
    } 
</style>

来源

2015-07-12 21:43:06

根据可用空间调整元素的大小，同时保持比例

回答

相关问题