css 尝试创建简单的页面：无边距/填充，仅滚动主页

y1aodyip  于 2023-05-08  发布在  其他
关注(0)|答案(2)|浏览(159)

我试图创建一个非常简单的html/css来获得基本的正确。
这实际上是为我的MainLayout.razor页面创建的，它将为每个网页创建一个框架，并将单独的.razor页面放入<main>部分。因此，中间的实际代码将是：

<main>
  @body
</main>

我有几个问题：
1.页眉有一个顶部/底部边距。为什么？不应该是0吗？
1.页脚具有顶部/底部填充。再一次，它不应该是0吗？
1.将正文设置为margin/padding为0似乎没有效果。为什么？
1.我试图让垂直滚动条只滚动<main>，并让页眉和导航始终可见（页脚似乎始终可见）。我还需要做什么？

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.my-header {
    background-color: lightcoral;
    margin: 0;
    padding: 0;
}

.my-nav {
    background-color: lightgreen;
    margin: 0;
    padding: 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
    padding: 0px 16px 0px 16px;
}

.my-main {
    flex: 1;
    overflow: auto;
    height: 100%;
    background-color: lightyellow;
    margin: 0;
    padding: 0;
}

.my-footer {
    z-index: 100;
    background-color: lightblue;
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="main.css" />
    <title>Basics</title>
</head>
<body>

<header class="my-header">
    <p>Nicolay Copy</p>
</header>

<nav class="my-nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float:right"><a class="active" href="#about">About</a></li>
    </ul>
</nav>

    <main class="my-main">
        <p>Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>

        <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle field of that war. We come to dedicate a portion of it, as a final resting place for those who died here, that the nation might live. This we may, in all propriety do.</p>

        <p>But, in a larger sense, we can not dedicate we can not consecrate we can not hallow, this ground The brave men, living and dead, who struggled here, have hallowed it, far above our poor power to add or detract. The world will little note, nor long remember what we say here; while it can never forget what they did here.</p>

        <p>It is rather for us, the living, we here be dedicated to the great task remaining before us that, from these honored dead we take increased devotion to that cause for which they here, gave the last full measure of devotion that we here highly resolve these dead shall not have died in vain; that the nation, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.</p>
    </main>

<footer class="my-footer">
    <p>Lincoln speech text is in the public domain; the organization, remaining text, and photo on this page are copyright 2020 Abraham Lincoln Online. All rights reserved.</p>
</footer>

</body>
</html>
css

2条答案

按热度按时间
thigvfpy

thigvfpy1#

使用***{}****通用选择器获取更多信息，请阅读：-https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
并且只有主体滚动条和页眉或页脚始终可见。header and footer set positionsticky**确保添加一个属性-top/right/left/righthttps://developer.mozilla.org/en-US/docs/Web/CSS/position

* {
    margin: 0;
    padding: 0;
}

.my-header {
    width:100%;
    height:20px;
    position: sticky;
    top:0;
    background-color: lightcoral;
    margin: 0;
    padding: 0;
}

.my-nav {
    background-color: lightgreen;
    position: sticky;
    margin: 0;
    padding: 0;
    top:20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
    padding: 0px 16px 0px 16px;
}

.my-main {
    //height:100vh;
    flex: 1;
    overflow: auto;
    //height: 100%;
    background-color: lightyellow;
    margin: 0;
    padding: 0;
}

.my-footer {   
    position: sticky;
    bottom:0;
    background-color: lightblue;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="main.css" />
    <title>Basics</title>
</head>
<body>

<header class="my-header">
    <p>Nicolay Copy</p>
</header>

<nav class="my-nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float:right"><a class="active" href="#about">About</a></li>
    </ul>
</nav>

    <main class="my-main">
        <p>Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>

        <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle field of that war. We come to dedicate a portion of it, as a final resting place for those who died here, that the nation might live. This we may, in all propriety do.</p>

        <p>But, in a larger sense, we can not dedicate we can not consecrate we can not hallow, this ground The brave men, living and dead, who struggled here, have hallowed it, far above our poor power to add or detract. The world will little note, nor long remember what we say here; while it can never forget what they did here.</p>

        <p>It is rather for us, the living, we here be dedicated to the great task remaining before us that, from these honored dead we take increased devotion to that cause for which they here, gave the last full measure of devotion that we here highly resolve these dead shall not have died in vain; that the nation, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.</p>
    </main>

<footer class="my-footer">
    <p>Lincoln speech text is in the public domain; the organization, remaining text, and photo on this page are copyright 2020 Abraham Lincoln Online. All rights reserved.</p>
</footer>

</body>
</html>
赞(0）分享  回复(0）举报  2023-05-08
fjaof16o

fjaof16o2#

你的大部分问题都来自@Azu在评论中解释的内容：某些html标签具有浏览器设置的默认样式。这些样式来自用户代理样式表。为了使他们的生活更轻松，许多开发人员喜欢使用CSS重置，这只是一组CSS规则，添加在您自己的样式表之前，并负责清除浏览器采取的一些决定（例如，默认的正文边距）。一些流行的CSS重置是normalize.css或Meyer Reset。
现在，您仍然可以看到一些空白，因为用户代理样式表为<p>标记提供了顶部和底部空白。您可以将所有<p>标签设置为没有边距，或者使用CSS重置来为您做这件事。
我不确定你的意思是关于给身体一个空白/填充0没有效果。我目前正在Chrome上运行您的代码和您的定义：

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

具有删除Chrome为主体标签提供的默认8 px边距的预期效果。
关于你的第四点，我不确定你的意思，但我可以看到两种可能性（你应该将<nav>移动到<header>，以便它们在两者中粘在一起）：

选项一：将设置为唯一的可滚动元素

默认情况下，主体是可以滚动的元素，但是您可以设置任何元素来滚动其内容。这是通过overflow css属性实现的。在您的情况下，您需要禁用主体上的滚动，然后将main设置为可滚动（您还必须给予最大高度，否则它将调整其高度以始终适应总内容而无需滚动）。其中棘手的部分是了解max-height应该是多少，因为它需要是窗口的总高度减去页眉和页脚。JavaScript在这里有帮助，但为了简单起见，我们可以设置一个任意的像素高度：

body {
  overflow: hidden; /* Disable the document's default scroll */
}

main {
  max-height: 200px; /* This is the arbitrary height that the main will occupy*/
  overflow: auto; /* This means, if the content does not fit, add a scrollbar */
}

大部分情况下都是这样的，除了你用固定的位置设置页脚。据我所知，你是css的新手，所以我推荐你阅读CSS Normal Flow。总而言之，这就是css将内容一个放在另一个之上的方式。但是，position属性的某些值会将一个元素从正常流中取出，并允许它位于其他元素的顶部（就像fixed的情况一样）。因此，我们必须删除你的css的那一部分：

.my-footer {
  position: static; /* This is the default position value that makes part of the normal flow */
}

这将是实现我相信你在第四点中所希望的一种方式。

选项二：使页眉和页脚在滚动正文时保持不变

另一种选择是保持正常的正文滚动，但只需定义页眉和页脚在滚动期间始终保持可见。这可以像你以前做的那样用固定的位置来完成，但我建议用粘性位置来代替。这样做的好处是元素在正常流中仍然占用空间，因此除非当前正在滚动，否则不会有任何重叠。从你的css开始（忽略前面的选项），你需要：

.my-header {
  position: sticky; /* Tell it to stick when scrolling */
  top: 0; /* Tell it where to stick to! In this case we tell it to stick to the top of the window (0px from the top). */
}

.my-footer {
  position: sticky; /* Tell it to stick when scrolling */
  bottom: 0; /* Tell it where to stick to! In this case we tell it to stick to the bottom of the window (0px from the bottom). */
}

从你的评论中，我意识到这一部分缺失了。正如你所说，设置位置粘性“移动你的页脚”。这是因为position sticky只会在元素的父容器当前与窗口的该部分接触时将元素粘贴到屏幕的底部。因为内容太少了，所以在大多数窗口大小中，主体都不够高，无法与屏幕底部接触，因此页脚会粘在其父窗口（主体）的底部。
为了处理这个问题，我们可以告诉身体有屏幕的高度，即使它的内容的高度更小：

html,
body {
  height: 100%;
}

下面是选项2的完整实现代码片段：

p {
  margin: 0; /*Clear default style for paragraphs */
}

html,
body {
  height: 100%;
}

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

main p:not(:last-child) {
  margin-bottom: 10px; /* Give the paragraphs in the main some spacing between paragraphs */
}

.my-header {
    background-color: lightcoral;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
}

.my-nav {
    background-color: lightgreen;
    margin: 0;
    padding: 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
    padding: 0px 16px 0px 16px;
}

.my-main {
    flex: 1;
    /*overflow: auto;*/ /*You no longer want it to scroll inside the main since you are scrolling the whole document */
    min-height: 100%; /* set it to always occupy at least the whole available height */
    background-color: lightyellow;
    margin: 0;
    padding: 0;
}

.my-footer {
    z-index: 100;
    background-color: lightblue;
    margin: 0;
    padding: 0;
    position: sticky;
    bottom: 0;
    width: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="main.css" />
    <title>Basics</title>
</head>
<body>

<header class="my-header">
    <p>Nicolay Copy</p>
    <nav class="my-nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li style="float:right"><a class="active" href="#about">About</a></li>
        </ul>
    </nav>
</header>


    <main class="my-main">
        <p>Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>

        <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle field of that war. We come to dedicate a portion of it, as a final resting place for those who died here, that the nation might live. This we may, in all propriety do.</p>

        <p>But, in a larger sense, we can not dedicate we can not consecrate we can not hallow, this ground The brave men, living and dead, who struggled here, have hallowed it, far above our poor power to add or detract. The world will little note, nor long remember what we say here; while it can never forget what they did here.</p>

        <p>It is rather for us, the living, we here be dedicated to the great task remaining before us that, from these honored dead we take increased devotion to that cause for which they here, gave the last full measure of devotion that we here highly resolve these dead shall not have died in vain; that the nation, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.</p>
    </main>

<footer class="my-footer">
    <p>Lincoln speech text is in the public domain; the organization, remaining text, and photo on this page are copyright 2020 Abraham Lincoln Online. All rights reserved.</p>
</footer>

</body>
</html>

我希望这能澄清你的一些问题！就像一些评论中指出的那样，你可以使用浏览器上的Web检查器来检查哪些css规则正在被应用，这样你就可以更好地调试你的样式。

赞(0）分享  回复(0）举报  2023-05-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com