Trung tâm cá nhân
sách gpt4 ăn đã đi

html - 设置相对于 parent parent 的高度但拉伸(stretch) parent

In lại 作者：搜寻专家 更新时间：2023-10-31 08:43:21 28 4
mua khóa gpt4 giày nike

此 HTML 结构有一个 div#page，其中当前页面内容将通过 Ajax 加载。内容始终由 section 标记组成，这些标记可以具有动态高度(相对于浏览器的百分比)或静态高度(以像素为单位)。

div#page 的高度应该调整，以便 footer 紧跟在最后一个 div#page> 部分 之后。

然而，为了能够为 div#page > section 标签设置一个百分比值，我给 div#page 设置了 100% 的高度。因此，它的 DOM 高度不会拉伸(stretch)。

nếu như footer 标签位于 div#page 内，它就可以工作。这对我来说不是一个好的解决方案，因为页脚会被动态加载的页面内容覆盖。

是否有一些神奇的 CSS 解决方案可以正确拉伸(stretch) div#page?

body, html { margin: 0; padding: 0; }
#outer { background: red; position: absolute; width: 100%; height: 100%; }
#page { height: 100%; }

#page > section { background: #666; width: 100%; }
#page > section:nth-of-type(2n) { background: #333; }
#page > section:nth-of-type(1) { height: 100%; }
#page > section:nth-of-type(2) { height: 160px; }
#page > section:nth-of-type(3) { height: 220px; }
#page > section:nth-of-type(4) { height: 120px; }

footer { background: green; height: 160px; }


    
    

      
Full height.

      
Static height 1.

      
Static height 2.

      
Static height 3.

    


    
    
      Immediately after static height 3.

câu trả lời hay nhất

如果您降低 #page div 的高度并将第一个 section 设置为 100vh 我想它会如您所愿，尽管只有较新的浏览器支持“viewport”单元 vh。

浏览器支持:http://caniuse.com/#feat=viewport-units 

  body, html { margin: 0; padding: 0; }
  #outer { background: red; position: absolute; width: 100%; height: 100%; }
  #page { }

  #page > section { background: #666; width: 100%; }
  #page > section:nth-of-type(2n) { background: #333; }
  #page > section:nth-of-type(1) { height: 100vh; }
  #page > section:nth-of-type(2) { height: 160px; }
  #page > section:nth-of-type(3) { height: 220px; }
  #page > section:nth-of-type(4) { height: 120px; }

  footer { background: green; height: 160px; }


    
    

      
Full height.

      
Static height 1.

      
Static height 2.

      
Static height 3.

    


    
    
      Immediately after static height 3.

关于html - 设置相对于 parent parent 的高度但拉伸(stretch) parent ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33011481/

28 4 0
Đề xuất bài viết: javascript - Safari 跳过网站标题并转到内容
Đề xuất bài viết: javascript - 使用 $http.get 在 Angular 中选择的下拉选项填充表数据
Đề xuất bài viết: javascript - GetOrgChart 值未在 jquery 验证器中更新
Đề xuất bài viết: javascript - 构建具有离线 asat 功能的网络应用程序
搜寻专家
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress