這麼長的故事短我有一個網站的想法，其中包括頂部的兩個大Div，中間有一個薄水平Div和另外兩個大Divs低。這些div不會有太多的文字或信息，只有H2和副標題。調整空白div的百分比

我想這個設計是高度和寬度的靈活，所以我設置Divs高度/寬度的百分比。然而，它們只與內部元素一樣大。我已經設定身體有100％的高度/寬度。

我試過這個jQuery代碼根據用戶的屏幕高度/寬度重新調整大小的身體，但它沒有奏效。

$("body").css("height","$(window).height()"); 
$("body").css("width", "$(window).width()");

任何想法？謝謝！

至於問，這裏的HTML

<body> 
    <div id="aboutMe"> 
     <h2>About Me</h2> 
    </div> 
    <div id="portfolio"> 
     <h2>Portfolio</h2> 
    </div> 
    <div class="clear"></div> 
    <div id="central"> 
     <h2>Leonardo</h2> 
    </div> 
    <div id="blog"> 
     <h2>Blog</h2> 
    </div> 
    <div id="contato"> 
     <h2>Contact</h2> 
    </div> 
    <script> 
     $(document).ready() { 
      $("body").css("height","$(window).height()"); 
      $("body").css("width", "$(window).width()"); 
     } 
    </script> 
</body>

而CSS

.clear { 
clear: both; 
} 

body { 
width: 100%; 
height: 100%; 
} 
/* ABOUT ME */ 
#aboutMe { 
height: 45%; 
width: 50%; 
float: left; 
background-color: #E89C0C; 
} 


/* FIM ABOUT ME */ 
#body { 
height: 100%; 
width: 100%; 
} 
/* PORTFOLIO */ 
#portfolio { 
height: 45%; 
width: 50%; 
float: right; 
background-image: #53FF00; 
} 


/* FIM PORTFOLIO */ 

/* CENTRAL */ 
#central { 
height: 10%; 
width: 100%; 
background-color: #000000; 
} 

/* FIM CENTRAL */ 

/* BLOG */ 
#blog { 
height: 45%; 
width: 50%; 
float: left; 
background-color: #AB0DFF; 
} 

/* FIM BLOG */ 

/* CONTATO */ 
#contato { 
height: 45%; 
width: 50%; 
float: right; 
background-color: #0CB6E8; 
} 

/* FIM CONTATO */

來源

2014-09-27 leofontes

請也分享你的HTML。另外，我對jQuery並不熟悉，所以我不確定，但是你是否嘗試了'$（「body」）.css（「height」，$（window）.height（）+「px」）'或者類似的東西？ – Passerby 2014-09-27 03:11:02

分享了代碼，只是試過了，它也沒有工作，但謝謝你的想法！ – leofontes 2014-09-27 03:31:22

你可以創建一個jsfiddle – CMPS 2014-09-27 03:31:43

純CSS解決方案 - CSS表線框

您的佈局實際上比看起來更復雜，所以給這個現代化的CSS解決方案的測試，看看你的想法。

它將有3行，並且該行內的每個部分將填充水平和垂直空間。因爲包含內容的DIVS是嵌套的，所以每行都是可定製的。至少它會擴展以填充瀏覽器窗口，併爲長內容創建垂直滾動條。要查看它的工作情況，請調整瀏覽器窗口大小，然後縮放/更改字體大小（ctrl +或 - ）。

要控制DIV線框，它使用CSS顯示：表設置。 注意：這爲線框使用CSS和DIV標記，不應與舊式HTML表格佈局混淆。它使用noooo HTML表格標籤。

一些使用顯示器的好處：表設置爲：

創建一個強大的線框
的表單元格將垂直擴展到最高的內容時，相鄰小區
目前的設計匹配包裝很長的水平內容，所以如果你的線框擴展到瀏覽器視口之外，它將包含所有的內容。
通過嵌套，它可以創建穩定的複雜佈局。

就像彩車和inline-block的，也有一些負面的CSS顯示：表：

當您設置的位置是：相對於上一臺顯示器價值DIV，相對位置會忽略。所以只需在display：table元素中嵌套一個位置：relative div。你可以絕對定位任何孩子。
除了IE6或IE7外，它有很好的支持。要支持這些瀏覽器，請使用表格htc polyfill。
匿名錶元素（瀏覽器添加隱含/缺少表元素）可能無法預測。所以對於線框，完全形成的嵌套div用於穩定。
沒有在CSS表設置

一個合併單元格或行跨度通過測試給這可能是因爲有一些東西，被忽略，但它會讓你在球場。

CSS

html{ 
height:100%; 
width:100%; 
margin:0; 
padding:0; 
border:0; 
} 

body { 
height:100%; 
width:100%; 
font-size:1em; 
margin:0; 
padding:0; 
border:0; 
} 

div { 
margin:0; 
padding:0; 
border:0; 
} 

h2, p { 
margin:0; 
padding:.5em; 
} 

.wrapper { 
height:100%; 
width:100%; 
display:table; 
border-style:none; 
border-collapse:collapse; 
background-color:#E2EFF3; 
} 

.nested { 
height:100%; 
width:100%; 
display:table; 
border-style:none; 
border-collapse:collapse; 
} 

.nested-row { 
display:table-row; 
} 

.row-top, .row-center, .row-bottom { 
display: table-row; 
} 

.cell-top { 
display:table-cell; 
height:45%; 
} 

.cell-center { 
display:table-cell; 
height:10%; 
} 

.cell-bottom { 
display:table-cell; 
height:45%; 
} 

#aboutMe { 
display:table-cell; 
width:50%; 
background-color:#E4E7EF; 
} 

#portfolio { 
display:table-cell; 
width:50%; 
background-color:#DEE0EB; 
} 

#central { 
display:table-cell; 
width:100%; 
background-color: #A5A9BC; 
} 

#blog { 
display:table-cell; 
width:70%; 
background-color:#697078; 
} 

#contato { 
display:table-cell; 
width:30%; 
background-color:#595E71; 
}

HTML

<body> 

<div class="wrapper"> 

<div class="row-top"> 
<div class="cell-top"> 
<div class="nested"> 
<div class="nested-row"> 
<div id="aboutMe"> 
<h2>About Me</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div id="portfolio"><h2>Portfolio</h2></div> 
</div><!-- end nested row --> 
</div><!-- end nested --> 
</div><!-- end cell top --> 
</div><!-- end row top--> 


<div class="row-center"> 
<div class="cell-center"> 
<div class="nested"> 
<div class="nested-row"> 
<div id="central"><h2>Leonardo</h2></div> 
</div><!-- end nested row --> 
</div><!-- end nested --> 
</div><!-- end cell center --> 
</div><!-- end row center--> 

<div class="row-bottom"> 
<div class="cell-bottom"> 
<div class="nested"> 
<div class="nested-row"> 
<div id="blog"> 
<h2>Blog</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div id="contato"><h2>Contact</h2></div> 
</div><!-- end nested row --> 
</div><!-- end nested --> 
</div><!-- end cell bottom --> 
</div><!-- end row bottom--> 

</div> 

</body>

來源

2014-09-27 11:14:02 Talkingrock

非常感謝你的解決方案隊友！真的幫了！ – leofontes 2014-09-29 01:41:10

不客氣:)我在JSFiddle中添加了一個媒體查詢示例，它通過更改不同的表格顯示來顯示：block，對於28em或更小的小屏幕尺寸/手持設備，將DIV彼此疊放在一起。這使線框響應。它被註釋掉了，因爲它需要更多的測試。當然IE6，IE7和IE8不能識別媒體查詢，所以如果你想支持這些瀏覽器，它需要一個媒體查詢htc polyfill。 – Talkingrock 2014-09-29 23:06:51

你把它作爲一個字符串，而不是實際的傳遞變量。

你不能在變量名周圍加引號，並期望它被渲染到其他任何東西。

你將不得不做這樣的，而不是返回實際高度：

$("body").height($(window).height());

您的代碼，如下面的代碼，將只返回$(window).height()作爲一個字符串，而不是實際的高度。此外，它會破壞你的代碼，因爲.height()函數需要一個高度輸入，而不是一串隨機文本。

$("body").height("$(window).height()");

而且，你可能要考慮重新評估你的邏輯在這裏，因爲body在大多數情況下總是那樣大的window，所以這段代碼是那種毫無意義的，因爲瀏覽器已經這樣做了。如果您嘗試始終確保身體達到100％身高，則可能需要考慮使用css position，並以div而不是body元素爲目標。

來源

2014-09-27 03:38:09

調整空白div的百分比

回答

純CSS解決方案 - CSS表線框

相關問題