保證金

事業部高度填充容器看看我的HTML和CSS：保證金

html , body{ 
    width: 100%; 
    height: 100%; 
    margin: 0 0 0 0;  
} 

.wrapper { 
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: auto; 
} 

.content { 
    margin: 10px auto 20px auto; 
    width: 724px; 
    border: black 1px solid; 
}

HTML：在默認情況下采取的窗口的寬度和高度的窗口作爲其大小

<body> 
    <div class="wrapper"> 
     <div class="content"> 

     </div> 
    </div> 
</body>

我的包裝的div。我想我的內容div始終填充包裝高度並保留其邊距，問題是我無法設置內容div的高度= 100％，因爲它有餘量，並會使包裝div溢出。 Here是我的jsfiddle

編輯

實施例闡明瞭一個問題：

假設div.wrapper的高度= 200像素

div.content的高度將是200 - （10 + 20） = 170px

我知道我可以通過jquery做到這一點，但我想用html/css找到解決方案

注意：div.wrapper的高度取決於用戶屏幕分辨率。

求解

感謝您的球員的關注！對此，我真的非常感激。我通過使用css3 calc函數找到了解決方案here。我認爲這些信息對你有幫助。

來源

2013-05-16 Doan Cuong

對不起，我真的不明白你的問題，你不能只刪除保證金？ – Raver0124

我想保留保證金。這就是爲什麼我無法設置內容div的高度= 100％。關於這個問題。讓我以身作則澄清。假設'wrapper div'的height = 200px，所以'content div'的height = 200 - （10 + 20）= 170px。我可以通過jquery在頁面加載，但我想通過純html/css實現它 –

你有沒有嘗試浮動的div，以便它填充其父元素？ – oshikryu

檢查這個小提琴http://jsfiddle.net/sarfarazdesigner/T7D32/9/

更新小提琴http://jsfiddle.net/sarfarazdesigner/T7D32/13/

我已經在你的CSS代碼做了一些細微的變化在這裏是

html , body{ 
    width: 100%; 
    height: 100%; 
    margin: 0;  
} 

.wrapper { 
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    overflow: auto; 
    padding:10px 0 20px 0; 
} 

.content { 
    margin:0 auto; 
    width: 724px; 
    border: black 1px solid; 
    height:100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

，將工作讓我知道如果你有任何問題

來源

2013-05-16 04:35:57

有一個問題。當你設置'height：100％'時，內容div溢出，我不想要這種行爲。我希望它適合內部父母沒有溢出 –

@DoanCuong，因爲你使用'邊框'這一點，你可以使用'border-box'屬性，它會工作 –

@DoanCuong現在你可以檢查我的更新答案 –

cha像這樣的.content類的CSS，你的問題將得到解決。

.content { 
    margin: 10px auto 20px auto; 
    width: 724px; 
    border: black 1px solid; 
    overflow: auto; 
    height: 100% 
}

來源

2013-05-16 04:41:04

這裏是Solution。

的HTML：

<body> 
    <div class="wrapper"> 
     <div class="content"> 

     </div> 
    </div> 
</body>

的CSS：

html , body{ 
    width: 100%; 
    height: 100%; 
    margin: 0 0 0 0;  
} 

.wrapper { 
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: auto; 
} 

.content { 
    margin: 10px auto 20px auto; 
    width: 724px; 
    border: black 1px solid; 
    height:inherit; 
    overflow:auto; 
    background:blue; 
    width:auto; 
}

的問題是在內容類。如果你想要內容div包裝包裝div的高度，必須指定一個height:inherit;，它繼承了其父div的高度。

希望這會有所幫助。

來源

2013-05-16 04:54:41 Nitesh

回答

相關問題