Question

似乎嵌套在我的父div中的所有元素都从我父母div的底部边框溢出。由于我刚刚开始学习如何编码，我使用边框，帮助我处理位置，在使用代码进行调整时实际查看更改。正如您所看到的那样，图像div覆盖了父级，而标题上的段落也是如此（...我假设按钮会做同样的事情，如果不是位于顶部）

似乎没有什么工作，大多数类似的问题似乎都处理浮动元素，但事实并非如此，因为我在页面上没有一个浮动元素。我以前在div中的标题上有<p>，我甚至尝试使用相对定位来修复它，但它不会移动一英寸，甚至边界都没有出现。所以我觉得我错过了关于div本身非常关键的东西。

所以，我想主要问题是“如何解决重叠问题？”如果你还可以提出一些关于为什么“位置：亲属”没有作为奖励的话，那么太棒了。

我知道这可能看起来不太清楚，所以如果你有什么不理解的地方请问。自昨天以来，我一直在挖掘数十个帮助论坛，似乎无法弄明白，并且非常喜欢一些帮助。

这是代码，并且非常感谢你的调整。

https://jsfiddle.net/r96fxfgj/

    <!DOCTYPE html>
<html>
<title>DISSECTIONS</title>
<head>
    <link rel="stylesheet" type="text/css" href="dissections.css">
</head>
    <body>
        <div id="header">
            <p><span>/<sup>*</sup></span>DISSECTIONS</p>
        </div>
        <div id="main">
            <div class="photo" id="one"> </div>
            <div class="photo" id="two"> </div>
            <div class="photo" id="three"> </div>
            <div class="photo" id="four"> </div>
            <span class="stretch"></span>
        </div>
        <div id="footer">
            <button id="about"> ABOUT </button>
            <button id="contact"> CONTACT </button>
        </div>
    </body>
</html>

CSS ---------

body {
    overflow: hidden; /*prevents scrolling*/
    font-family: courier;
}

div {
    width: 98vw;

}

p{
    font-size: 8vh;

}
span {
    font-size: 15vh;
}
sup {
    font-size: 8vh;
}


#header {
    border: 2px solid black;
    height: 20vh;
    padding: 0;
}


#main {
    border: 2px solid red;
    height: 60vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding: 0;
    text-align: justify; /*justify*/
}
.stretch { /*justify*/
    width: 100%;
    display: inline-block;
}

.photo {
    border: 2px solid black;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    width: 20vw;
    margin-left: 1%;
    margin-right: 1%;
    background-repeat: no-repeat;
    background-image: url(
        http://www.publicdomainpictures.net/pictures/10000/nahled/1001-12380278201dXT.jpg);
}

#footer {
    border: 2px solid blue;
    height: 10vh;
    bottom: 0;
}

Answer 1

这里有一些独立但类似的问题。大多数归结为你无意中为父母设置的特定高度小于它包含的东西。

一般情况下，只有当您的设计确实需要这些特定尺寸时，才能设置特定的高度或宽度 - 否则只需让内容流量决定其父母的大小。

溢出容器的标题中的文字：字体在调整大小时有点奇怪 - 您放在font-size中的值将与文本本身匹配，但也会缩放上下的填充文本为（通常）较大的值（这是在其他元素上找到的正常padding属性的补充）。您可以通过设置文本line-height的值来解决此问题（短标题的便宜但经常使用的黑客为line-height:1px，这将删除所有额外的填充。不要如果文本有可能换行到第二行，或者第二行与第一行重叠，则使用此项。）
图像溢出#main：您将#main设置为视口高度的百分比，但图像的实际大小为100％ - 因此根据窗口大小，图像可能会最终大于或小于容器。要么两者都使用相同的单位，要么根本不在#main上设置高度（因此让图像决定容器的高度。）
position:relative - 我在您的代码中没有看到这一点，但我发现它让很多人感到困惑：position:relative违反直觉并不会影响您附加到它的DOM节点，它会影响该节点的绝对定位子节点。如果父母有position:relative，则任何position:absolute的孩子都会相对于父母的位置而不是相对于整个窗口的位置。如果你没有使用position:absolute（除非绝对必要，否则你不应该这样做！）那么你就不需要position:relative。

Answer 2

这似乎是一个盒子尺寸问题。

将此代码段添加到CSS的顶部（我总是将其包含在我的CSS重置中），以便每个元素在其宽度/高度中包含其子代的填充和边框：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

如果您不想将其应用于所有内容，则可以将样式应用于.main和.photo类。

至于你的标题，内容是溢出的，因为你有一个设置的高度，如果你设置高度自动标题高度适应。但是，如果您想保留标题的高度，可以将溢出属性更改为隐藏重叠内容的overflow:hidden;或overflow:auto在溢出时添加滚动条。

父div之外的子元素

2 个答案: