Jquery 使用百分比调整空div的大小 P.>长话短说，我想到了一个网站，上面有2个大div，中间有1个瘦的水平div，还有2个大的div。这些div没有太多的文本或信息，可能只有一个H2和一个副标题_Jquery_Html_Css_Percentage

Jquery 使用百分比调整空div的大小 P.>长话短说，我想到了一个网站，上面有2个大div，中间有1个瘦的水平div，还有2个大的div。这些div没有太多的文本或信息，可能只有一个H2和一个副标题

jquery html css

Jquery 使用百分比调整空div的大小 P.>长话短说，我想到了一个网站，上面有2个大div，中间有1个瘦的水平div，还有2个大的div。这些div没有太多的文本或信息，可能只有一个H2和一个副标题,jquery,html,css,percentage,Jquery,Html,Css,Percentage,我希望此设计的高度和宽度灵活，因此我将Divs height/width设置为百分比。然而，它们只和里面的元素一样大。我已将车身设置为100%高度/宽度我尝试使用jQuery代码根据用户的屏幕高度/宽度来重新调整主体的大小，但没有成功 $("body").css("height","$(window).height()"); $("body").css("width", "$(window).width()"); 有什么想法吗？谢谢大家! 如前所述，这里是HTML <body&

我希望此设计的高度和宽度灵活，因此我将Divs height/width设置为百分比。然而，它们只和里面的元素一样大。我已将车身设置为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>

它是一个字符串，而不是实际的传递变量

不能在变量名周围加引号，而期望它被呈现为任何其他名称

您必须这样做才能返回实际高度：

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

与下面的代码一样，您的代码将仅以字符串形式返回

$（window）.height（）

，而不是实际高度。此外，它将中断代码，因为

.height（）

函数需要一个高度输入，而不是一个随机文本字符串

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

也可以考虑重新评估你的逻辑，因为<代码>正文在大多数情况下总是和<代码>窗口< /代码>一样大，所以这个代码是没有意义的，因为浏览器已经这样做了。如果您试图始终确保主体处于100%的高度，您可能希望使用css

position

，并以

div

为目标，而不是

主体

元素。

纯css解决方案-css表格线框您的布局实际上比看起来更复杂，所以请对这个现代CSS解决方案进行测试，看看您的想法

它将有3行，该行中的每个部分将填充水平和垂直空间。因为保存内容的div是嵌套的，所以每一行都是可自定义的。至少，它将展开以填充浏览器窗口，并为长内容创建垂直滚动条。若要查看其工作情况，请调整浏览器窗口的大小，并缩放/更改字体大小（ctrl+或-）

为了控制DIV线框，它使用CSS display:table设置。 注意：这对线框使用CSS和DIV标记，不应与老式的HTML表格布局混淆。它使用Nooo HTML表格标记。

使用“显示：表格”设置的一些好处包括：

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

就像浮动和内联块一样，CSS display:table也有一些负面影响：

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

做一个全面的测试，因为可能有一些东西被忽略了，但它会让你在球场上

CSS

HTML


关于我
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
文件夹
利奥纳多
博客
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
接触

请也共享您的HTML。另外，我不熟悉jQuery，所以我不确定，但您是否尝试过

$（“body”）.css（“height”，$（window）.height（）+“px”）

之类的东西？共享了代码，只是尝试了一下，但也没用，但谢谢您的想法！您能创建一个JSFIDDLE吗非常感谢您的解决方案伙伴！真的很有帮助！不客气：）我在JSFIDLE中添加了一个媒体查询示例，通过将各种表格显示更改为display:block（对于28em或更小的小屏幕/手持设备），将div彼此堆叠在一起。这会使线框具有响应性。它被注释掉了，因为它需要更多的测试。当然，IE6、IE7和IE8不识别媒体查询，所以如果您想支持这些浏览器，它需要一个媒体查询htc polyfill。

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

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;
}

<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>