Question

所以我有一些基本的CSS（我使用的是框架，因此其中一些会覆盖默认值）：

<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} .container { clear: both;
    height:auto;
    overflow:auto;} .flow-text {font-size: 115%;} </style>

这是我的index.php页面：

<!DOCTYPE html>
<html>
    <head>
        <title>Steelsite</title>
        <?php include ("includes/style.html");
include ("php/parsedown.php");?>
    </head>

    <body>
        <?php include ("includes/navbar.html");
include ("includes/materialjs.html");?>
        <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%;">
                            <?php
$md = file_get_contents('md/index.md');
echo Parsedown::instance()->text($md); ?>
                        </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%;"><?php $fortune = system('fortune', $val); echo rtrim($val, "0");?>
                </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>

您可以在https://steelcowboy.me

直播

如您所见，在索引页面上，白色不会延伸到页面底部。但是，如果有足够的内容（请参阅https://steelcowboy.me/about.php），那么它确实会触底。索引页面的修复程序为height:100%;然而，然后在“关于我”页面上，我得到了一个不需要的滚动条。我认为我有两个相互作用的东西不应该这样做，有关解决这个问题的最佳方法的任何建议吗？谢谢！

Answer 1

为主标记添加CSS：main {width:70%; margin-left:auto; margin-right:auto; height:100%; background-color:#FFFFFF;}

按如下方式编辑容器类：width:100%;

这将使用＆＃34;容器＆＃34;有效地在DIV周围创建第二个容器。类。因为它是相同的背景颜色，它将完成你所需要的。容器宽度必须改变;否则，它将是其父母的70％（这是主要的），使其比你原先预期的要薄得多。如果它扰乱了关于页面，请告诉我。

*注意：对于IE，您还应该将display:block添加到上面的CSS代码中。

CSS - 高度100％导致滚动条

1 个答案: