使用CSS更改瀏覽器高度時調整div寬度

爲了保持div的寬高比，一直在尋找僅有CSS的解決方案的幾天時間。重要的部分是div高度應該是瀏覽器窗口的高度（不滾動和不隱藏溢出），並且寬度百分比應該調整以保持縱橫比正確。到目前爲止我發現的所有東西（主要是填充技巧）都使用父元素的寬度來維持方面，並在div下面增加了很多額外空間，尤其是在大屏幕上的全屏幕中。使用CSS更改瀏覽器高度時調整div寬度

真的試圖避免javascpript。

這裏是我的基本設置：

::編輯::添加鏈接的jsfiddle - http://jsfiddle.net/SUbYB/ ::編輯2 ::只是使用jQuery來處理基於高度的div的設置寬度。謝謝大家！

樣式

body, html{ 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
    max-width: 100%; 
} 
.super-container{ 
    position: relative; 
    width: 69.8%; 
    height: 95%; 
    max-width: 2008px; 
    margin: 0 auto; 
    padding: 0 15.1% 0 15.1%; 
    background: rgba(200,200,200,.2); 
} 
.aspect-container{ 
    position: relative; 
    display: block; 
    height: 95%; 
    margin: 0 auto; 
    background: rgba(200,200,200,.4); 
} 
.aspect-critical-content{ 
    position: absolute; 
    top:0; right: 0; bottom: 0; left: 0; 
    background: rgba(200,0,0,.2); 
}

和HTML

<html> 
<head> 
</head> 

<body> 

<div class="super-container"> 
    <div class="aspect-container"> 

     <div class="aspect-critical-content"> 
     </div> 

    </div> 
</div> 

</body> 
</html>

感謝提前任何幫助！

來源

2013-11-10 Jeffrey_0100101001100101011001

你能提供一個小提琴或蹲跳？ –

http://jsfiddle.net/SUbYB/ jsfiddle鏈接到上面的代碼 –

你可以嘗試使用calc，如果跨瀏覽器對你來說不是太重要：https：//developer.mozilla.org/en-US/docs/Web/CSS/calc？redirectlocale = en-US＆redirectslug = CSS％2Fcalc –

關於什麼的只是用：

display: table; 
display: table-row; 
display: table-cell;

這看起來像你的情況（additionaly到您的代碼）：

.aspect-container{ 
    display: table-row; 
} 
.aspect-critical-content{ 
    display:table-cell; 
    height:100%; 
} 

.aspect-container2{ 
    display:table-row; 
    height:100px; 
}

和HTML：

<div class="super-container"> 
    <div class="aspect-container"> 
    <div class="aspect-critical-content"> 
     some text 
    </div> 
    </div> 
    <div class="aspect-container2"> 
    <div> 
     text2 
    </div> 
    </div> 
</div>

第二行我已經添加了，只是爲了展示如何輕鬆地在同一個容器內玩另一個塊的高度。

The code on plunker.

來源

2013-11-10 00:31:28 Agat

嘗試過這一點，但當容器高度降低或增加時，容器（和孩子）不會調整到正確的寬度。 –

不確定我關注的是高度如何與評論中的寬度相關。 – Agat

目前，在我嘗試的每個解決方案中，div的高度將隨着瀏覽器寬度的改變而調整。我需要div的寬度來調整瀏覽器的高度。 –

可以使用此CSS-技術：

.aspect-container { 
    width: 100%; 
    height: 0; 
    margin: 0 auto; 
    /* this is a aspect ratio of 1:3 */ 
    padding-top: 33.33%; 
    position: relative; 
} 

.aspect-critical-content { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
}

填充頂部的爲100的基礎的值是縱橫比。
小提琴：http://jsfiddle.net/mE4qG/

來源

2013-11-11 03:09:26

謝謝，但填充和邊距從父元素的寬度中繪製它們的值。我需要窗口/父元素的高度作爲設置.aspect-critical-container大小的驅動因素。越來越像這不僅僅是一個CSS解決方案。 –

使用CSS更改瀏覽器高度時調整div寬度

回答

相關問題