使Div的高度響應

我在響應式設計中遇到了一個非常大的問題。使Div的高度響應

我想用HTML和CSS設計Metro用戶界面，並且我希望在差異設備中更改框高度。我使用寬度百分比。我知道它也可以用於身高。但如果我使用高度百分比，如果垂直縮小瀏覽器，高度會越來越小。

另一個問題是，如果一起使用多臺顯示器一起觀看桌面，寬度將比高度大得多，所以這些盒子將具有較小的高度和較大的寬度。

有沒有一種有效的方式來使我的情況下的響應網站？

注意：我不想有一個垂直滾動。

任何建議或經驗，以有效的方式作出迴應？謝謝

來源

2017-08-05 Parsa mhn

嘗試這樣的：

div { 
 
    /* 25% of viewport */ 
 
    height: 25vh; 
 
    width: 15rem; 
 
    background-color: #222; 
 
    color: #eee; 
 
    font-family: monospace; 
 
    padding: 2rem; 
 
}

<div>responsive height</div>

來源

2017-08-05 08:15:37

我告訴我使用的百分比，vh表示視口高度。這和我所做的一樣。那我提到的其他情況呢？多個顯示器？ –

開始vw以獲得所需的height比例爲小屏幕視圖寬度。

然後，觀看者超過一定width後 - 在我的例子1080px，引入固定height於使用media query的元素。

這使該元素與小型和額外的，EXTRA寬屏幕和觀衆的垂直尺寸很好地工作不會有它

#logo { 
 
    height: 26vw; 
 
    width: auto; 
 
} 
 

 
@media screen and (min-width: 1080px) { 
 
    #logo { 
 
    height: 300px; 
 
    } 
 
}

<img id="logo" src="https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png">

來源

2017-08-05 08:45:10

謝謝，但我的問題是關於身高，我在我的問題中提到它 –

@Parsamhn同樣的想法仍然適用。你可以用'vw'單位設置'height'。我編輯了這個例子。 –

非常感謝，但如果屏幕寬度是3600和高度980，那麼我的盒子寬度會比它的高度大得多。它可以嗎？任何建議？另一個問題是如果有人從高處收縮瀏覽器（這些框會縮小），那麼這又如何呢？ –

任何影響

*{ 
 
    margin:0; 
 
    padding:0; 
 
    } 
 
.side-box { 
 
       background:red; 
 
       width:250px; 
 
       height:100vh; 
 
       }

<div class="side-box"> 
 
    </div>

來源

2017-08-05 09:29:36

使Div的高度響應

回答

相關問題