个人中心
gpt4 book ai didi

jquery - 使用百分比调整空 div 的大小

转载 作者：太空宇宙 更新时间：2023-11-04 12:52:22 24 4
gpt4 key购买 nike

长话短说，我有一个网站的想法，该网站将由顶部的 2 个大 Div、中间的 1 个细的水平 Div 和另外 2 个低的大 Div 组成。这些 div 上不会有太多文本或信息，可能只有一个 H2 和一个副标题。

我希望此设计的高度和宽度灵活，因此我将 Divs 高度/宽度设置为百分比。然而，它们仅与内部元素一样大。我已将 body 设置为 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 */

最佳答案

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

您的布局实际上比看起来更复杂，所以请测试一下这个现代 CSS 解决方案，看看您的想法。

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

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

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

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

就像 float 和内联 block 一样，CSS display:table 也有一些缺点:

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

对此进行全面测试，因为可能有一些东西被忽略了，但它会让您大致了解。

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>

关于jquery - 使用百分比调整空 div 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26070868/

24 4 0
文章推荐： ruby-on-rails - 将基于 cloud9 的 rails 应用程序部署到本地 linux 服务器
文章推荐： c++ - cc.game.restart() 在 cocos2d-js 3.10 扩展 sdkbox 时 carsh
文章推荐： linux - 在 wget 命令中使用用户提供的 header 值的问题
文章推荐： c++ - 分布式锁
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com