截面看起来比预期的要小

时间：2019-02-27 13:08:27

标签： javascript html css html5 css3

我在处理HTML部分时遇到问题。如屏幕截图所示，蓝色斑点是区域，它们应包括灰色空间。空白是HTML的section标签中的内容。

尝试在每个部分之间添加一些空间时发现了问题，但是我们尝试执行的所有操作都无济于事。

enter image description here 

/* 
 * 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>
            &copy;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 :(得分：0)

您正在对容器应用浮子，该浮子将项目从文档流中取出。考虑使用flexbox而不是float进行布局。 

.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;
}

答案 1 :(得分：0)

在处理浮动内容时，这是一个众所周知的问题。由于浮动内容不在正常文档流中，因此height元素中的section没有得到正确的计算。

在overflow:auto;元素中添加section，可以通过强制渲染引擎重新计算元素的height来纠正问题，一旦完成，它就应该识别子内容并考虑在内。

这里有more on the issue和其他解决方案。

相关问题
最新问题