html - 简单的html css block 结构，不能为content div使用-headerHeight bottom-margin来避免滚动条？-6ren

html - 简单的html css block 结构，不能为content div使用-headerHeight bottom-margin来避免滚动条？

转载作者：太空宇宙更新时间：2023-11-04 15:42:15

以下是我简单的html/css结构:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>de titel</title>
        <style type="text/css">
            * {
                color: #FFFFFF;
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
                background-color: #000000;
            }
            #wrapper {
                width: 800px;
                height: 100%;
                margin-left: auto;
                margin-right: auto;
            }
            #header {
                background-color: lightblue;
                position: absolute;
                top: 0;
                width: 800px;
                border: 1px solid red;
                height: 60px;
            }
            #content {
                height: 100%;
                margin-top: 60px;
                margin-bottom: -60px;
            }
            #menu {
                width: 200px;
                height: 100%;
                border: 1px solid red;
                background-color: gray;
                float: left;
                padding: 5px 0 0 5px;
            }
            #text {
                background-color: orange;
                height: 100%;
                margin-left: 200px;
                padding-top: 5px;
                padding-left: 15px;
                margin-right: -2px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <br><center>[ hier moet een header image worden toegevoegd ]</center>
            </div>
            <div id="content">
                <div id="menu">
                    Link 1
                </div>
                <div id="text">
                    <h1>Titel</h1>
                    <p>Dit is de tekst van je pagina.</p>
                </div>
            </div>
        </div>
    </body>
</html>

我的问题是:“为什么不是 bottom-margin: -60px; 导致内容层减少 60 像素高度，以至于滚动条不显示，因为标题？我应该如何解决这个问题最干净的方式？”

提前致谢。

最佳答案

这是我的看法。

请注意 doctype 中的变化(为了简单起见，我在这里使用 HTML5 doctype，因为它会在所有浏览器中触发标准模式)请务必始终使用标准模式 doctype，除非您正在准备处理怪癖模式的 hell 。

    <!DOCTYPE html>
<html>
    <head>
        <title>de titel</title>
        <style type="text/css">
                * {
                        color: #FFFFFF;
                        margin: 0;
                        padding: 0;
                }
                html, body {
                        height: 100%;
                        background-color: #000000;
                }
                #wrapper {
                        width: 800px;
                        height: 100%;
                        margin-left: auto;
                        margin-right: auto;
                        position:relative; /* added this */                        
                }
                #header {
                        background-color: lightblue;
                        position: absolute;
                        top: 0;
                        width: 800px;
                        border: 1px solid red;
                        height: 60px;
                }
                #content {
                        /*removed these*/
                        /*height: 100%;
                        margin-top: 60px;   
                        margin-bottom: -60px;*/
                        /* added these */
                        width:100%;
                        position:absolute;
                        top:60px;
                        bottom:7px;                        
                }
                #menu {
                        width: 200px;
                        height: 100%;
                        border: 1px solid red;
                        background-color: gray;
                        float: left;
                        padding: 5px 0 0 5px;
                }
                #text {
                        background-color: orange;
                        height: 100%;
                        margin-left: 200px;
                        padding-top: 5px;
                        padding-left: 15px;
                        margin-right: -2px;
                        border: 1px solid red;
                }
        </style>
    </head>
    <body>
        <div id="wrapper">
                <div id="header">
                        <br><center>[ hier moet een header image worden toegevoegd ]</center>
                </div>
                <div id="content">
                        <div id="menu">
                                Link 1
                        </div>
                        <div id="text">
                                <h1>Titel</h1>
                                <p>Dit is de tekst van je pagina.</p>
                        </div>
                </div>
        </div>
    </body>
</html>

关于html - 简单的html css block 结构，不能为content div使用-headerHeight bottom-margin来避免滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1808318/

文章推荐： html - 动态调整照片大小而不是缩回

文章推荐： C++ 变量不会在范围末尾被删除

文章推荐： css - 如何从 FriendFeed 小部件中删除边框？

文章推荐： ASP.NET 转发器 C# 中的 HTML 单选按钮

css - 如果有一个 --> .content p, .content ul, .content li, .content a，什么是 SASS 方法？
什么是 SASS 方法要求干燥这样的东西: .content p, .content ul, .content li, .content a 最佳答案这 4 个元素都有共同的样式吗？ .conten
contentful - 使用 Contentful 检索内容类型的更友好方式
我正在评估 Contentful.com 作为 Angular SPA 的内容引擎。我面临的问题是按内容类型检索条目(例如，获取“博客”类型的所有条目)。如 documentation exampl
javascript - CSS : add content to an element is `content: "text to add";` as remove content from an element is ` ? 中的等价物是什么？？？？`
在我编辑的主 wiki 上有一个名为 Item: 的自定义命名空间，提示是该命名空间内的每个页面都显示为 Item:This_item - - Item:That_item -- Item:Foo_i
Can not uploading content to WordPress folder /wp-content/uploads/woocommerce_uploads/(无法将内容上载到WordPress文件夹/wp-Content/Uploads/WooCommerce_Uploads/)
我正在尝试编写一个Python脚本，可以将图片和pdf上传到WordPress。我希望图像上传到文件夹‘/wp-Content/Uploads/’，将pdf文件上传到文件夹‘/wp-Content/U
contentful - 如何监控 Contentful API 的使用情况？
是否可以监控进行了多少次 Contentful API 调用，并理想地在即将超过配额时收到通知？谢谢最佳答案当然，您可以在右侧用户配置文件的下拉菜单 > Organizations and Bi
content-disposition - Content-Disposition 文件名中的分号
我在尝试在 IE8 中下载带有分号的文件名时遇到问题。 Response.AddHeader("Content-Disposition", "attachment; filename=\"" + at
contentful - 如何通过 Contentful Delivery API 查看内容条目的语言环境
我在 Contentful Delivery API 中运行查询以返回基于它的 slug 的特定页面项目。这个查询还设置了语言环境，以便它只返回我需要呈现的语言的数据。但是，我还需要设置页面的 hr
contentful - 如何在 Gatsby 中处理 Contentful 内容数据
我有兴趣使用 Gatsby建一个Netlify使用来自 Contentful 的内容的静态网站 Netlify 有这个不错的 Gatsby 入门指南: https://www.netlify.com/
git - 如何修复git中的 "modified content, untracked content"？
目标是提交一个 git 分支。分支的“git status”的输出是: On branch zeromq_new Your branch is up to date with 'origin/zero
c# - 设置 content in C#
我目前正在学习在 ASP.NET 3.5 和 C# 中使用 MasterPages 和 ContentPlaceHolders - 现在，我正在拼命尝试通过我的编程代码编辑 asp:Content-C
java - 如何比较两个文本文件的内容并返回 "Same Content"或 "Different Content"？
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
html - 如何在 content 和 content::before 上使用不透明度而不重叠
我使用 bootstrap 3 作为我的网格框架和 CSS 来创建一个具有一个倾斜/倾斜边缘的半透明区域，但由于分层不透明度，我的元素遇到了问题。期望是中心是倾斜的，但右侧仍然是正方形。有没有更好
java - 非法参数异常 : Unknown URL content://CONTENT
IllegalArgumentException: 未知 URL 内容:// ^ 对上述内容做了噩梦。我检查了我的变量和路径，但看不出问题是什么？非常感谢任何指点! 这是我的痕迹。 java.lan
javascript - 尝试通过扩展元素填充 polymer 元素的
我有两个元素:一个是元素，另一个是元素。 populated-drop-down extends drop-down ，但是，正如您可能已经猜到的那样，它会尝试使用一些选项预先填充它。假设我可以简
ruby - 产量 :content doesn't show content_for :content
我想我也有同样的问题。 Using multiple yields to insert content 我尝试了这个解决方案。我试过在我的 application.html.erb 中有 conte
html - justify-content 和 align content 的默认值是什么？
此链接 ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 表示 justify-content 和 align-content 的
cocoa - "Content Values"和 "Content Objects"有什么区别
我现在正在探索绑定(bind)，并且有一个 NSPopUpButton - 它为我提供了一些值选择下的绑定(bind)选项 - Content , Content Objects , Content
Xamarin 形式 : Content View doesn't display in content page
正在尝试在内容页面中加载内容 View 。当我运行代码时，它不会出现在我的内容 View 中。我正在从我的内容页面分配两个可绑定(bind)参数。内容页面: 内容 View :
javascript - 获取 :before content and printing special characters from content
我想从我的 :before 标签中获取 content。我知道有些人会说它不是真正的(伪)元素，但在 JS 中有一种方法，但有人可以帮助我在 JQ 中做到这一点，因为我有多个标签并且我想用 $.eac
Linux : mail send file content as mail content
我创建了一个.sh脚本，并将结果记录在一个文件中，执行后我会尝试将文件内容作为mail正文发送。这是我运行的命令: sh update.sh >> update.$(date +"%Y-%m-%d:

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 简单的html css block 结构，不能为content div使用-headerHeight bottom-margin来避免滚动条？