是否可以在不使用JavaScript的情況下重新調整窗口大小的div大小？

我需要設置div的大小，在我的情況下爲#panel-container，當視口高度達到450px的大小時。是否可以在不使用JavaScript的情況下重新調整窗口大小的div大小？

基本上，#panel-container應該隨着用戶縮小瀏覽器窗口而縮小，讓div始終在視口內可見。

我想知道如果可能達到這種效果，而不使用JS和只使用CSS。我知道CSS媒體查詢，但我需要在用戶重新調整窗口大小時重新調整大小。

我可以使用最新的瀏覽器和HTML5和CSS3功能。歡迎任何想法。

window.app = { 
 
    start: function() {} 
 
};

body { 
 
    background-color: darkslateblue; 
 
} 
 
#header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: dimgray; 
 
} 
 
#panel-wrapper { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 0; 
 
    height: 100%; 
 
    background-color: moccasin; 
 
} 
 
#panel-container { 
 
    width: 200px; 
 
    height: 400px; 
 
    overflow: auto; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Builder</title> 
 

 
</head> 
 

 
<body onload="app.start();"> 
 
    <div id="header">header</div> 
 
    <div id="panel"> 
 
    <h1>Title</h1> 
 
    <div id="panel-wrapper"> 
 
     <div id="panel-container"> 
 
     <div id="panel-content"> 
 
      some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long 
 
      text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long 
 
      text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long 
 
      text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long 
 
      text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long 
 
      text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long 
 
      text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long 
 
      text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long 
 
      text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long 
 
      text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long 
 
      text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long 
 
      text here,some long text here,some long text here. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-04-23 GibboK

媒體查詢有什麼問題 - [jsbin]（http://jsbin.com/medipoxabi/1/）？ – Vucko

使用css3 @media規則？ –

@Vucko感謝您的支持，但我需要更改div的高度，查看此編輯，我無法通過媒體查詢進行編輯... http://jsbin.com/hejiwaqoge/1/ – GibboK

您可以通過使用calc設置的視口高度的div至100％的高度，你的頭的高度低，然後設置其max-height實現這一目標到400px（或任何你需要它）。

這裏有一個簡單的例子給你：

*{box-sizing:border-box;} 
 
html{height:100%;} 
 
body{height:200%;margin:0;} 
 
div{ 
 
    background:#ccc; 
 
    height:calc(100vh - 50px); 
 
    max-height:300px; 
 
    font-family:arial; 
 
    left:0; 
 
    overflow:auto; 
 
    padding:5px; 
 
    position:fixed; 
 
    top:50px; 
 
    width:25%; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras leo erat, blandit ac est nec, congue fermentum dui. Duis vitae urna enim. Cras vulputate ante at ante dictum porta. Cras placerat dolor augue, in eleifend lectus fermentum scelerisque. Aenean dui magna, pharetra eu est sed, volutpat molestie libero. Sed dictum pellentesque tellus, ac rhoncus turpis dictum eu. Sed id aliquet ex. Suspendisse scelerisque sem odio, sit amet pharetra elit viverra at. Ut gravida congue rutrum. Proin at velit laoreet, venenatis mauris vitae, condimentum lectus. Ut mollis purus eu dolor finibus tincidunt.</div>

來源

2015-04-23 09:50:53 Shaggy

謝謝，它運行良好，在這裏我已經在我的代碼中應用了您的建議，非常棒！ http://jsbin.com/tefufuluda/1/ – GibboK

只需添加一篇關於視口百分比長度的有趣文章http://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about- -cms-22573 – GibboK

您可以使用CSS3媒體查詢本。 Check out this

喜歡的東西：

@media (max-width: 600px) { div#YOUR_DIV { width: 100px; } }

來源

2015-04-23 09:48:07

感謝您的回答，但恐怕它不能按預期工作，我無法根據視口動態設置高度，下面是一個示例：http://jsbin.com/quwimapani/1/edit – GibboK

Soluition 1：

百分比的div使用寬度一樣，80％。通過根據窗口該寬度在div的寬度將減少或根據瀏覽器increage寬度

解2：

使用媒體查詢如果上面的選項在CCS中失敗

@media (max-width : 900px) and (min-width: 500px) 
{ 
    div{ 
     width:200px; 
    } 
} 

@media (max-width : 400px) and (min-width: 500px) 
{ 
    div{ 
     width:100px; 
    } 
}

使用@media，在HTML頁面@@媒體

來源

2015-04-23 09:54:32 Arjun

我沒有確定此解決方案的理想是，但它確實ahiceve效果你想

#panel-wrapper { 
      position: fixed; 
      width: -moz-calc(100% - 80%); 
      width: -webkit-calc(100% - 80%); 
      width: -o-calc(100% - 80%); 
      width: calc(100% - 80%); 
      z-index: 10; 
      padding-right: 80%; 
      top: 50px; 
      left: 0; 
      height: 100%; 
     } 

     #panel-container { 
      width: 100%; 
      height: 400px; 
      overflow: auto; 
      background-color: moccasin; 
     }

以上是我從你的代碼修改

來源

2015-04-23 10:01:04 lejimmie

對不起，這包括寬度而不是高度。我的錯。 – lejimmie

我只會在一行使用大衆到位PX，一切都將作爲圖像作爲響應回答這個

閱讀理解

https://css-tricks.com/viewport-sized-typography/

來源

2015-04-23 10:05:31

是否可以在不使用JavaScript的情況下重新調整窗口大小的div大小？

回答

相關問題