截面看起来比预期的要小
问题描述 投票：0回答：2
我遇到了HTML部分的问题。如屏幕截图所示，蓝点是部分，它们应包括灰色空间。白色空间位于HTML中的section标签内。
尝试在每个部分之间添加一些空间时发现了这个问题，但我们尝试过的所有内容都没有做任何事情。
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<a href="https://github.com/jesper3005"><img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" /></a>
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
<a href="#">Contact</a>
</header>
<nav>
<ul>
<li><a href="#section-1" class="navTitle">Module 1</a></li>
<li><a href="#section-2">Maven</a></li>
<li><a href="#section-3">Network and HTTP</a></li>
<li><a href="#section-4" class="endOfModule">JavaScript & CA1</a></li>
<li><a href="#section-5" class="navTitle">Module 2</a></li>
<li><a href="#section-6">ORM with JPA</a></li>
<li><a href="#section-7">Rest webservices with JAX-RS</a></li>
<li><a href="#section-8">JavaScript</a></li>
<li><a href="#section-9" class="endOfModule">CA2</a></li>
<li><a href="#section-10" class="navTitle">Module 3</a></li>
<li><a href="#section-11">SYS 1</a></li>
<li><a href="#section-12">?</a></li>
<li><a href="#section-13" class="endOfModule">SYS 2</a></li>
<li><a href="#section-14" class="navTitle">Module 4</a></li>
<li><a href="#section-15">SPA with React (TBD)</a></li>
<li><a href="#section-16">React routing, Security and RN</a></li>
<li><a href="#section-17" class="endOfModule">CA3 (TBD)</a></li>
<li><a href="#section-18" class="navTitle">Module 5</a></li>
<li><a href="#section-19">Project - Week 1</a></li>
<li><a href="#section-20">Project - Week 2</a></li>
<li><a href="#section-21">Project - Week 3</a></li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
<a href="https://github.com/jesper3005/SimpleCalculatorTravisCi">Simple Calculator</a>
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
<a href="https://docs.google.com/document/d/1_JV7ePLSpxGAd9KqauESTYbdR13LuafNKiFN0RX0v8w/edit?usp=sharing">Exercises - Network stack</a>
<br>
<a href="https://docs.google.com/document/d/1SwxIZBLPdN6pKXjm8CmRxFbxxzjaeRbbcIedUwlzk_I/edit?usp=sharing">Exercise HTTP</a>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
<a href="https://docs.google.com/document/d/14yDqpX_GEHvCkXMBM7KOD8mjEM2eLSj8WJqsfdhxSso/edit#">The JS array</a>
<br>
<a href="https://docs.google.com/document/d/1cd4-VI5rSGv5NL6YHk_JGjPJckOdnYeBqFL1J4Y9EtE/edit#">JavaScript Exercice 1</a>
<br>
<a href="https://docs.google.com/document/d/13TM3p2zq4u3cieJtIYQTnQaN7gYspyk9EIYxX0D_JgA/edit">Course Assignment 1</a>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
<a href="https://github.com/jesper3005/JPADayOneExercise/tree/master">Exercise - JPA Entity Mappings - 1</a>
<br>
<a href="https://github.com/jesper3005/JPADayTreeExercise/tree/master">Exercise - Java Persistence - Querying - 3</a>
<h3>Part 2</h3>
<a href="#">Studypoint part two</a>
<h3>Part 3</h3>
<a href="https://github.com/jesper3005/ExamPrepOneJPQL">Exam Preparation Exercise on relations and queries</a>
<br>
<a href="https://github.com/jesper3005/ExamPrepTwoJPQL">Exam Preparation Exercise on JPQL</a>
<br>
<a href="#">Object Relational Mapping and Inheritance</a>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<a href="#"><img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" /></a>
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>2个回答
0
投票
投票
您正在将一个浮动应用于容器，该容器将该项目从文档流中取出。考虑使用flexbox而不是浮动进行布局。
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}
0
投票
投票
使用浮动内容时，这是一个众所周知的问题。 height元素的section未正确计算，因为浮动内容不在正常文档流程中。
将overflow:auto;添加到section元素，这应该通过强制渲染引擎重新计算元素的height来纠正问题，一旦它这样做，它应该识别子内容并将其考虑在内。
这是more on the issue和其他解决方案。
最新问题
- 切换按钮 .isSelected() 为 true，但在 JavaFX 中视觉上没有变化
- 在yarn下的spark作业中连接启用Kerberos + SSL的solr
- 编译致命错误：java.lang.Il legalAccessError：class lombok.javac.apt.LombokProcessor
- 使用 puppeteer 和 puppeteer-cluster 出现“尝试使用分离框架”
- 如何刷新健康检查ui页面？
- 在 Polars df 内转置会导致“TypeError：尚未实现：嵌套对象类型”
- 获取地址_组件
- .NET 8 上的 WPF 项目缺少“连接服务”菜单中的“添加服务引用”
- 如何删除远程 Git 存储库上的 HEAD 分支？
- XAMPP mysql错误InnoDB：尝试读取空间0中的页号65537，空间名称为innodb_system，超出表空间范围
- 如何在 IBM PCjr 上等待？
- 如何解决 Altair 图表空白的问题
- 如何创建透明背景的图像
- 为什么 GCP Pub/Sub 会发布两次消息？
- Pytorch GPU 内存随着每个批次不断增加
- Sqlalchemy 选择 AttributeError: 'dict' 对象没有属性
- 为什么图像和边框之间有多余的空间？我该如何删除它？
- SwiftUI - 可调整大小的列表高度取决于元素计数
- 如何获取 SwiftUI 列表内容的高度？
- 如何获取controller中action属性的route值？
© www.soinside.com 2019 - 2024. All rights reserved.