Html CSS——高度100%导致滚动条_Html_Css

Html CSS——高度100%导致滚动条

html css

Html CSS——高度100%导致滚动条,html,css,Html,Css,因此，我有一些基本的CSS（我使用的是一个框架，因此其中一些会覆盖默认值）： html，body{height:100%；margin:0；}a{font-weight:bold；}body{background color:#e0e0e0；}img{max-width:100%；height:auto；}.container{clear:both；高度：自动；溢出：自动；}。流文本{字体大小：115%；} 这是我的index.php页面： <!DOCTYPE html> &l

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

html，body{height:100%；margin:0；}a{font-weight:bold；}body{background color:#e0e0e0；}img{max-width:100%；height:auto；}.container{clear:both；
高度：自动；
溢出：自动；}。流文本{字体大小：115%；}

这是我的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>


钢结构
欢迎来到詹姆斯·希尔德的网站
从运行《财富》开始：

您可以在

如您所见，在索引页面上，白色不会延伸到页面底部。然而，如果有足够的内容（请参阅），那么它确实会进入底部。索引页的修复是

高度：100%

；然而，在“关于我”页面上，我得到了一个不需要的滚动条。我想我有两件事情不应该这样做，关于解决这个问题的最佳方法有什么建议吗？谢谢

为主标记添加CSS:

main{width:70%；左边距：自动；右边距：自动；高度：100%；背景色：35;FFFFFF；}

按如下方式编辑容器类：

width:100%
这将有效地使用“container”类在DIV周围创建第二个容器。因为它是相同的背景色，所以它可以满足您的需要。容器宽度必须改变；否则，它将是其父对象（主对象）的70%，使其比您最初预期的薄得多。如果它破坏了关于页面，请告诉我
*注意：对于IE，您还应该在上面的CSS代码中添加display:block
。
您希望页面的arch Linux和photography块的结束点应该结束。不应该有额外的滚动条，您可以给出min height
。容器
如：min height:300px。非常好用，谢谢！但是，为了使main
块像容器一样工作，我必须添加@媒体屏幕和（最大宽度：992px），并告诉它将主宽度设置为85%；现在它的工作原理与容器完全相同。但我的问题是，为什么我们要把总管变成集装箱？为什么不直接修复容器本身呢？因为修复容器需要我们给它一些疯狂的高度，比如2000-3000px。这将确保所有页面，特别是那些内容冗长的页面，都被它“覆盖”。顺便说一句，100%的高度仅覆盖可见屏幕区域。另外，我在示例中选择了70%，因为这是我在您的站点上检查容器时看到的宽度。祝你好运。啊，mk。这让事情变得复杂了一点，但它似乎和它应该做的完全一样。就像我提到的那样，只需要使宽度响应，但除此之外，它是完美的。非常感谢你的帮助！
<!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>