Question

所以你可以看到我目前在这里有什么：https://steelcowboy.me

基本上我想要的是一个白色内容区域，两侧是灰色的，我的蓝色导航栏。我不希望在白色部分的顶部或下方有任何灰色（即我只想在侧面看灰色，在中间看到白色）。但是，我不确定我需要做什么 - 我为容器元素尝试了不同的display选项，但是工作（flex）的选项会混淆内部的所有内容。我觉得这是一个非常简单的修复，但似乎无法得到它。有人有答案吗？谢谢！

<!DOCTYPE html>
<html>
    <head>
        <title>Steelsite</title>
        <meta charset="utf-8">
<link href="/css/materialize.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#3f51b5">
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style>
    </head>
    <body>
    [navbar in here]
 <main>
            <div class="container white">
                <h3 class="center-align">Welcome to the site of James Heald</h3>


                <div class="row">

                    <div class="col s12 m6">
                        <div class="flow-text" style="font-size: 125%;">
                            <p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p>
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p>                        </div>
                    </div>

                    <div class="col s12 m6">
                        <div class="center-align">
                            <img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div>
                    </div>

                </div>

                <div class="divider"></div>

                <h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts
down the system for days.
                </p>
                <div class="container center-align">
                    <img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img">
                </div>
            </div>
        </main>
        <script src="scripts/google.js"></script>
    </body>
</html>

Answer 1

问题在于这个选择器：

h3 {
  margin: 1.46rem 0 1.168rem 0;
}

它设置了一个上边距，正在压低容器的其余部分。

如果您将margin-top: 0设置为该特定元素，则应解决此问题。

Answer 2

这个空间是由你的标题贡献的，删除它上面的边缘并且你很好。下面的解决方案说明了如何使用内联样式修复它们，但您应该考虑使用css类：）

解决方案1：删除h3上的上边距，无论是内联还是通过css类。

<h3 class="center-align" style="margin-top: 0px;">Welcome to the site of James Heald</h3>

解决方案2：在内联或通过css类添加顶部填充到容器。这可能是一种更好的方法，因为它不会干扰您的h3类，因为您可能希望在您网站的其他位置使用上边距。

<div class="container white" style="padding-top: 10px;">

要使容器跨越整个高度，请确保所有父元素的高度均为100％。 e.g：

<main style="height: 100%">
  <div class="container white" style="padding-top: 10px; height: 100%">
    ...

Answer 3

通过将overflow:auto添加到容器

来解决

使元素垂直跨越整个容器

3 个答案: