html - 填充页面 100% 高度的内容包装器-6ren

html - 填充页面 100% 高度的内容包装器

转载作者：行者123 更新时间：2023-11-28 16:42:34

24

4

我正在努力让我的 div (#content) 达到页面的 100% 高度，如果我调整浏览器的大小，我的 div (.divAboutRight) 会相应地拉伸(stretch)以容纳内容，但我的包装 div (#content)才不是？我有一个图像 (#logo) 以它的父级 (#content) 为中心，当父级未填充 100% 时它不会这样做。

我确定我遗漏了一些非常基本的东西。

如有任何帮助或指导，我们将不胜感激。

           <style>
            html{margin:0; padding:0; width:100%; height:100%;}
            body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}

            .head{width:100%; height:60px; background-color:#FFFFFF;}
            #content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
            #Back
            {
                position:absolute;
                left:0;
                background:url(../images/Back.png) no-repeat;
                background-size: 100% 100%;
                float:left;
                min-width:55%;
                height:59%;
                border:1px solid green;
            }
            #logo
            {
                display:block;
                position: absolute;
                top: 50%;
                left: 50%;
                max-height: 132px;
                max-width: 133px;
                margin: -66.5px 0 0 -66px;
                z-index:9999999;
            }
            .divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}

            </style>

            <body>
            <div class="head">
                <!-- Header Content -->
            </div>

            <div id="content">
                    <div id="Back">
                        <!-- absolute positioned -->
                   </div>

                <!-- Fixed logo to be center of content wrapper -->
                <img id="logo" width="133" height="132" src="images/logo.png"/>

                <div class="divAboutRight">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.

            Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.

            Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.

            In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.

            Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
                </div>


            </div>
            </body>

最佳答案

据我所知，您的 div #content 没有覆盖整个高度，因为您有一个高度为 60px 的 div .head；

你可以 float 你的.head div 或者让它成为position:absolute;

您还可以像这样在 #content div 旁边包含 .head div:

        <body>
        <div id="content">

            <div class="head">
                <!-- Header Content -->
            </div>

                <div id="Back">
                    <!-- absolute positioned -->
               </div>

            <!-- Fixed logo to be center of content wrapper -->
            <img id="logo" width="133" height="132" src="images/logo.png"/>

            <div class="divAboutRight">
                    <!-- Dynamic Content -->
            </div>


        </div>
        </body>

关于html - 填充页面 100% 高度的内容包装器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19501000/

24

4

0

文章推荐： python - Tkinter 文件对话框后 Matplotlib 图形不工作

文章推荐： python - Twython OAuth1 问题，使用示例代码时出现 401 错误

文章推荐： python - scipy.fft 挂起某些声音文件

python 包装
正在尝试创建一个 python 包。似乎有效，但我收到警告。我的 setup.py 是: #! /usr/bin/env python from distutils.core import setup
haskell - 包装/展开通用量化类型
我导入了一个数据类型 X ，定义为 data X a = X a 在本地，我定义了一个通用量化的数据类型，Y type Y = forall a. X a 现在我需要定义两个函数， toY 和 fro
rust - 包装 AsyncRead
我似乎无法让编译器让我包装 Tokio AsyncRead: use std::io::Result; use core::pin::Pin; use core::task::{Context, Po
python - 一个接一个地调用Python函数，包装？
我有两个函数“a”和“b”。当用户上传文件时，“b”被调用。 “b”重命名文件并返回新文件名。之后应该编辑该文件。像这样: def a(): edits file def b(): r
.net - 包装 IQueryable
我使用 Entity Framework 作为我的 ORM，我的每个类都实现了一个接口(interface)，该接口(interface)基本上表示表结构(每个字段一个只读属性)。这些接口(inter
java - 包装 jframe
有没有办法打开一个程序，通常会打开一个新的jframe，进入一个现有的jframe？这里是解释，我下载了一个java游戏，其中一个是反射游戏，它在一个jframe中打开，框架内有一堆子面板，我想要做
Android 包装 block ？
我想要下面的布局 | AA BBBBBBB | 除非没有足够的空间，在这种情况下 | AA | | BBBBBBB | 在这种情况下，A 是复选框，B 是复选框旁边的 Text
CSS 问题 - 包装
我正在尝试以不同的方式包装我的网站，以便将背景分为 2 部分。灰色部分是主要背景，还有白色部分，它较小并包装主要内容。基本上我想要this看起来像this . 我不太确定如何添加图像来创建阴影效果，
Java - IntBuffer 包装
我正在使用 : 读取整数文件 int len = (int)(new File(file).length()); FileInputStream fis = new FileInputStream(f
JavaFX 包装 : NoClassDefFoundError
我使用 maven 和 OpenJDK 1.8 打包了一个 JavaFX 应用程序我的 pom.xml 中的相关部分: maven-assembly-plugin
.net - 包装 ItemsControls 的内容
我正在使用两个不同的 ItemsControl 来生成一个按钮列表。
macros - 包装 TimerOutputs 宏
我有一个情况，有一个变量会很方便，to , 可以是 TimerOutput或 nothing .我有兴趣提供一个采用与 @timeit 相同参数的宏来自 TimerOutputs(例如 @timeit
css - 包装 DIV 的边距问题
我正在尝试包装一个名为 content 的 div与另一个具有不同背景的 div。但是，当将“margin-top”与 content 一起使用时div，似乎包装 DIV 获得了边距顶部而不是 co
.net - 什么是 dnu 包装？
文档不清楚，它似乎允许包装 dll 和 csproj 以在 Asp.Net Core 5 应用程序中使用。它是否允许您在 .Net Core 5 网站中使用针对 .Net Framework 4.6
nservicebus3 - 包装 NServiceBus.IHandleMessages
我被要求开发一个层，该层将充当通用总线，而不直接引用 NServiceBus。到目前为止，由于支持不引人注目的消息，这并不太难。除了现在，我被要求为 IHandleMessages 提供我们自己的定义
javascript - 包装 getServerSideProps 抛出异常
我正在尝试包装 getServersideProps使用身份验证处理程序函数，但不断收到此错误:TypeError: getServerSideProps is not a function我的包装看
scala - 定制 SBT 包装
我有一个项目，它在特定位置(不是/src/resources)包含资源(模板文件)。我希望在运行 package-bin 时将这些资源打包。我看到了 package-options 和 packag
javascript - 优化 Jade 包装
我正在寻找打印从一系列对象中绘制的 div。我可以通过使用下面的管道语法来实现这一点。 each i, key in faq if (key == 0) |
javascript - 包装 Collection.insert
我在 Meteor.js“main.js - Server”中有这个方法。 Meteor.methods({ messageSent: function (message) { var a
dart - 包装 polymer 元素纸张输入的验证错误
我注意到，如果我的自定义Polymer 1.x元素的宽度比纸张输入元素上的验证错误消息的宽度窄，那么错误将超出自定义元素的右边界。参见下图: 有没有一种机制可以防止溢出，例如在到达自定义元素的边界时自

首页

博学

6Ren·AI

商城

html - 填充页面 100% 高度的内容包装器