底部的HTML证明和页脚

Question

我对bootstrap和css我很新。首先，我想知道我编写的代码是否正确。使用更多容器可以吗？我使用流体容器作为标头和页脚（宽度100％大众），以及用于内容的标准容器。

其次，我不确定编写页脚的最佳方法是什么。我需要在页面底部，但不用绝对位置固定（我不希望它将其固定在浏览器窗口中）。我尝试了不同的解决方案而无需成功。我可以将所有容器嵌套在另一个容器中吗？

非常感谢您，对不起，如果我没有完美地解释或错过任何事情。

<div class="container">
    <div class="row">
        <div clas="col-xs-12">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-brand no_margins">
                        <img src="images/logo.png" alt="logo">
                    </div>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active">
                            <a href="#">
                                About
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Works
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                News
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Contacts
                            </a>
                        </li>

                    </ul>

                </div>
            </nav>
        </div>
    </div>
</div>
<!-- close container navbar-->
<!-- header -->
<div class="container">
    <div class="row">
        <header class="col-xs-12 static_header">
            <div class="row">
                <div class="col-xs-12 col-sm-3 hidden-xs logo_header">
                    <img src="images/logo_header.png" />
                </div>
                <div class="col-xs-12 col-sm-9 title_header">
                    <h1>
                        My Title
                    </h1>

                </div>
            </div>

        </header>
    </div>
</div>
<!-- end header -->

<!-- content -->
<div class="container">
    <div>
        <div class="row">
            <div class="col-xs-12" id="content_box">
                <h2>
                    About
                </h2>
                <p>
                   my text
                </p>
                ​

            </div>

        </div>
    </div>
</div>

<!-- end content -->
<footer class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 contact_footer">
                        <a href="#">[e-mail]</a><br>
                        <a href="#">[phone]</a>
                    </div>
                    <div id="footer_social_bar" class="col-xs-12 col-sm-4">
                        <img src="images/fb.png"/>
                        <img src="images/linkedin.png"/>
                        <img src="images/twitter.png"/>
                    </div>
                    <div class="col-xs-12 col-sm-4 copyright">
                        © 2017, company
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

如果您担心观众使用屏幕远大于网站中的内容，则可以使用以下CSS来确保网站至少为像浏览器一样大。

html{
	height:100%;
}
body{
	min-height:100%;
	background-color:#0C0;
}

<p>I only have a small amount of content. But the body background-color is as big as the screen</p>