css - 使用显示网格时，主要内容部分向下移动，留下很大的差距-6ren

css - 使用显示网格时，主要内容部分向下移动，留下很大的差距

转载作者：行者123 更新时间：2023-11-27 22:59:04

这是我在这里发表的第一篇文章，因为我真的很困惑。在使用主容器集中所有内容后，我决定移动到网格布局以允许将来添加，如侧边栏。但是，当我这样做时，我的主要部分已经大大向下移动，留下了一个很大的差距，看起来甚至不是空白，只是空白。这是我第一次尝试自定义 css、html 网站，非常感谢任何帮助。代码笔: https://codepen.io/weirdflex/pen/MzxqdY再次感谢!

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MayMays</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<nav class = "main-nav">
    <a href = "#" class="nav-link"><img class="logo" src="/Images/logo.png" alt="Logo"></a>
    <a href = "#" class="nav-link">Home</a>
    <a href = "#" class="nav-link">Revision</a>
    <a href = "#" class="nav-link">Quiz</a>
    <a href = "#" class="nav-link right">Forums</a>
    <a href = "#" class="nav-link right">Contact Us</a>
</nav>

<section class="main-content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis animi aliquam consequuntur et illum, nisi porro eaque sint alias accusantium voluptates fugit, rerum nihil voluptas consectetur molestiae accusamus excepturi cupiditate?</p>
    </div>  
</section>

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

body {
    background-color: #583a7a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(178,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23583a7a'/%3E%3Cstop offset='1' stop-color='%230691b0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(166,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23fd9bff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fd9bff' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2' gradientTransform='rotate(0,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23fd9bff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fd9bff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    height: 200vh;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 960px 1fr;
}


body * {
    text-decoration: none;
    color: white;
}

.container {
    width: 900px;
    margin: 0 auto;
}

.logo {
    height: 50px;
}

.main-nav {
    height: 80px;
    width: 100%;
    grid-column: 2;
}

.main-content {
    height: 100vh;
    background: #ffffff57;
    box-shadow: 0px 0px 100px #000000;
    grid-column: 2;
}

.nav-link {
    line-height: 50px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1rem 2rem;
    float: left;
}

.right {
   float: right;
}

附言。请原谅糟糕的格式，我知道人们如何正确地将代码粘贴到这里

最佳答案

您需要从主体 CSS 中删除 height: 200vh; 以删除出现的新空间。

从您的设计来看，我假设您希望您的主要内容因框阴影而“ float ”。我在 .main-content CSS 中添加了 margin-bottom: 50px; 以保持这种效果。

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

body {
    background-color: #583a7a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(178,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23583a7a'/%3E%3Cstop offset='1' stop-color='%230691b0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(166,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23fd9bff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fd9bff' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2' gradientTransform='rotate(0,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23fd9bff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fd9bff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 960px 1fr;
}


body * {
    text-decoration: none;
    color: white;
}

.container {
    width: 900px;
    margin: 0 auto;
}

.logo {
    height: 50px;
}

.main-nav {
    height: 80px;
    width: 100%;
    grid-column: 2;
}

.main-content {
    height: 100vh;
    background: #ffffff57;
    box-shadow: 0px 0px 100px #000000;
    grid-column: 2;
    margin-bottom: 50px;
}

.nav-link {
    line-height: 50px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1rem 2rem;
    float: left;
}

.right {
   float: right;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MayMays</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<nav class = "main-nav">
    <a href = "#" class="nav-link"><img class="logo" src="/Images/logo.png" alt="Logo"></a>
    <a href = "#" class="nav-link">Home</a>
    <a href = "#" class="nav-link">Revision</a>
    <a href = "#" class="nav-link">Quiz</a>
    <a href = "#" class="nav-link right">Forums</a>
    <a href = "#" class="nav-link right">Contact Us</a>
</nav>

<section class="main-content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis animi aliquam consequuntur et illum, nisi porro eaque sint alias accusantium voluptates fugit, rerum nihil voluptas consectetur molestiae accusamus excepturi cupiditate?</p>
    </div>  
</section>

</body>
</html>

关于css - 使用显示网格时，主要内容部分向下移动，留下很大的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53603134/

文章推荐： javascript - 如何根据 url 的起始字母从数组中随机选择值

文章推荐： javascript - 尝试在 AngularJS 上调用函数时出错

文章推荐： JavaScript 文档.域 : Chrome and Firefox return different

文章推荐： html - CSS flexitem 的 paddingleft 属性在页面刷新时不起作用

c# - WPF-如何在不使用向上、向下、向左和向右箭头键的情况下设置向上、向下、向左、向右事件？
我正在使用面部跟踪进行 HCI(人机交互)。我正在尝试使用面部控制 PC。我有 3x3 二维网格按钮。1 2 34 5 67 8 9 假设，当前焦点在按钮 5 上。如果我按向上箭头，则焦点将在 2
java - 螺旋穿过二维数组(l-r，向下，r-l，向下，l-r，...)
我正在为蛇和梯子制作一 block 板，到目前为止，我已经按降序打印了板。但是，我需要以正确的方式打印电路板。编辑“螺旋下降”意味着 100...91 81...90 80...71 ...
jQuery 向下/向上滑动和响应式设计
我有一个可以响应式调整大小的菜单，因此每次调整大小时 div (#menuWFhover) 的内容都会重新排列，因此 div 根据窗口大小具有不同的高度。当我使用 jQuery slideDown/
javascript - 向下/向上滚动时显示白屏
我们从服务器获取数据并附加 ListView 。我们的问题是，当向上/向下滚动时，它首先显示白屏，然后显示数据。向下/向上滚动时，之前出现的白屏应删除 for (var i=0; i");
javascript - 向下/向上滚动时导航汉堡图标反复闪烁
我想要一个汉堡图标动态改变颜色的代码，以适应网站的黑色部分/部分和白色。它最初是 3 段白色，js 代码几乎是好的和正确的，但是当它在白色部分时它一直闪烁，并在红色和白色之间闪烁。 js var to
jquery - 单击页脚向上/向下
我对点击事件的页脚位置有疑问。我正在使用 bootstrap css，我有一个可折叠元素(bootstrap 中的 Accordion )，当它折叠时它有一个名为 .accordion-toggle.
css - 向下/向上滑动动画
在此代码段中，使用关键帧和动画并显示无/ block ，div 动画以在悬停时向下滑动。 h1 { padding: 20px; } div { width: 100%; background
Python3如何按一定精度向上(向下)舍入
我需要对一个 float 进行四舍五入。例如 4.00011 。内置函数 round() 总是在数字 > .5 时向上舍入，在 = 0 val *= 10 ** precision r
c++ - 调整文件大小(向下)
我正在尝试就地缩小文件。我正在用另一个文件的内容替换一个文件的内容，完成后我想确保源文件是否小于目标文件，目标文件是否正确收缩。 (为什么:因为dest文件是一个备份，写入media的开销很大，所以
c# - 如何整数除以负数*向下*？
似乎每当我用一个负整数除以一个正整数时，我都需要它向下舍入 (向 -inf)，而不是向 0。但 C# 和 C++ 都向 0 舍入。所以我想我需要一个 DivideDownward() 方法。我可以用
Javascript 按键/向下/向上事件触发顺序
考虑这个简单的代码: document.addEventListener( 'keypress', function() { console.log( 'press' ); } ); document
.net - 如何检查azure资源是否可用(向上/向下)
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
.net - 如何检查azure资源是否可用(向上/向下)
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
java - 如何使recyclerview无限滚动(向下/向上)？
我见过几个recyclerview的无限滚动示例，但它们都是向下滚动的。我想要的是一次又一次地加载我的列表，但无论用户是从上面还是从下面滚动。正常列表向上滚动向下滚动这样可以通过无限滚动一遍
jquery向上/向下 slider 与ajax冲突
我正在使用带有 View 的 drupal 7，并且我正在使用我发现的向上/向下文本幻灯片的 jquery 脚本。它有效，但是当我尝试将它与带有 ajax 的 View 公开过滤器一起使用时，它似乎不
jquery效果-向下/向上滑动隐藏div，隐藏当前显示的隐藏div
*场景我希望制作一个类似于本网站上的 jquery 效果，它位于主 Flash 添加的右侧: http://www.commbank.com.au/ *问题我已经开始了，但是用很多方法遇到了一些障
jquery - 如何循环遍历颜色数组以更改按键背景(按下/向下)
互联网。如果这与其他人没有什么关系，请原谅我，但我会将其留在这里，以防这是一个有效的问题。我正在尝试创建一个文本区域字段，其中用户每次按下键(a-z)，都会触发背景颜色更改(在数组中列出)。我一直在
javascript - 按住一个键时如何避免多个键向上/向下/按下事件？
我正在创建一个网络前端来控制一个小型机器人。 Ajax 调用将在 keydown 上进行，以启动机器人，并在 keyup 上进行停止。我的问题是，当按下某个键时，keyup、keydown 和 ke
javascript - 滚动条强制 Div 向下
我在内容容器中有两个 div，一个向左浮动，另一个向右浮动。我正在使用屏幕的整个宽度。左 div 宽度为 1290px，右 div 宽度为 625px。有时，在加载页面时，滚动条会更改可用屏幕宽度的宽
css - 向下/向上滚动页面时自动定位 div
请看这个UI sketch图片，我在某个站点的侧边栏(黑框)中有这个 div，当我向下滚动或向上滚动时，我不希望它隐藏...我希望它在我向下滚动和移动时自行向下移动当我向上滚动时向上滚动，这样它就永远

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 使用显示网格时，主要内容部分向下移动，留下很大的差距