纯CSS解决方案 - CSS表格线框

Question

这么长的故事短片我想到了一个网站，其中包括2个顶部的Div，1个中间的薄水平Div和另外2个较低的Div。这些div不会有很多文字或信息，只有H2和副标题。

我希望这个设计的高度和宽度都很灵活，所以我将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 */

Answer 1

纯CSS解决方案 - CSS表格线框

您的布局实际上比看起来更复杂，因此请对此现代CSS解决方案进行测试，看看您的想法。

它将有3行，该行中的每个部分都将填充水平和垂直空间。由于保存内容的DIVS是嵌套的，因此每行都是可自定义的。它至少会扩展以填充浏览器窗口，并为长内容创建一个垂直滚动条。要查看它是否有效，请调整浏览器窗口的大小，然后缩放/更改字体大小（ctrl +或 - ）。

要控制DIV线框，它使用CSS显示：表格设置。 注意：这为线框使用CSS和DIV标记，不应与旧式HTML表格布局混淆。它使用noooo HTML表格标签。

使用display：table设置的一些好处是：

创建健壮的线框
表格单元格将垂直展开以匹配相邻单元格中最高的内容
当前设计包含长水平内容，因此如果您的线框扩展到浏览器视口之外，它将包含所有内容。
通过嵌套，可以创建稳定的复杂布局。

就像浮点数和内联块一样，CSS显示有一些负面信息：table：

当您在具有表格显示值的DIV上设置position：relative时，将忽略相对位置。所以只需嵌套一个位置：display：table元素中的相对div。然后你可以绝对定位任何孩子。
除IE6或IE7外，它有很大的支持。要支持这些浏览器，请使用表格htc polyfill。
匿名表元素（浏览器添加隐含/缺少的表元素）可能无法预测。因此对于线框，完全形成的嵌套div用于稳定性。
CSS表格设置中没有colspan或rowpan

给这个通过测试，因为可能有一些被忽略的东西，但它会让你进入球场。

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>

Answer 2

你把它作为一个字符串，而不是实际的传递变量。

您不能在变量名称周围添加引号，并希望将其呈现为其他任何名称。

你必须这样做，而不是返回实际的高度：

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

您的代码与下面的代码一样，只会将$(window).height()作为字符串而不是实际高度返回。此外，它会破坏您的代码，因为.height()函数需要高度输入，而不是随机文本字符串。

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

另外，您可能需要考虑在此重新评估您的逻辑，因为body在大多数情况下总是与window一样大，所以这段代码有点无意义，因为浏览器已经这样做了。如果您尝试始终确保身体处于100％高度，则可能需要查看使用css position，并定位div而不是body元素

使用百分比调整空div

2 个答案:

纯CSS解决方案 - CSS表格线框