时间戳

首页 > 解决方案 > HTML 包装器不会扩展页面的整个高度

html - HTML 包装器不会扩展页面的整个高度

问题描述

我的网站包装器不会填充页面的整个高度。我尝试将最小高度调整为 100%，也尝试将高度调整为 100%。我试过自动高度。我确信这是我缺少的一些简单的东西，但我似乎无法找到解决这个问题的方法。我也尝试过使用标签将 CSS 添加到 HTML 页面，但这也不起作用。

body {
  font-family: Verdana, Arial, sans-serif;
  background-color: #00005D;
  min-height: 100%;
  margin: 0;
}

html {
  min-height: 100%;
  margin: 0;
}

#wrapper {
  background-color: #b3c7e6;
  width: auto;
  min-height: 100%;
  overflow: hidden;
}

nav {
  float: left;
  width: 150px;
  padding-top: 50px;
}

#rightcol {
  margin-left: 155px;
  background-color: #ffffff;
  color: #000000;
}

header {
  background-color: #869dc7;
  color: #00005D;
  font-size: 100%;
  padding-left: 30px;
  padding-bottom: 3px;
  padding-top: 3px;
}

h2 {
  color: #869dc7;
  font-family: arial, sans-serif;
}

main {
  display: flex;
  padding: 20px 20px 20px;
}

#floatright {
  margin: 10px;
  float: right;
}

nav a {
  margin: 30px;
}
<div id="wrapper">
  <nav>
    <a href="default.aspx">Home</a> <br />
    <a href="application.aspx">Application</a><br />
    <a href="vehicle.aspx">Vehicle</a><br />
    <a href="visa.aspx">Visa</a><br />
    <a href="default.aspx">Loan</a><br />
    <a href="summary.aspx">Summary</a>
  </nav>
  <div id="rightcol">
    <header>
      <img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px" />
      <h1>CRIF Access</h1>
    </header>
    <main>
      <h2>This is just a test sentence for the main section of the page.</h2>
    </main>
  </div>
</div>

标签： htmlcss

解决方案

试试看：

html,
body {
    height: 100%;
}

body {
    font-family: Verdana, Arial, sans-serif;
    background-color: #00005d;
    min-height: 100%;
    margin: 0;
}

html {
    min-height: 100%;
    margin: 0;
}

#wrapper {
    background-color: #b3c7e6;
    width: auto;
    height: 100%;
    overflow: hidden;
}

nav {
    float: left;
    width: 150px;
    padding-top: 50px;
}

#rightcol {
    margin-left: 155px;
    height: 100%;
    background-color: #ffffff;
    color: #000000;
}

header {
    background-color: #869dc7;
    color: #00005d;
    font-size: 100%;
    padding-left: 30px;
    padding-bottom: 3px;
    padding-top: 3px;
}

h2 {
    color: #869dc7;
    font-family: arial, sans-serif;
}

main {
    display: flex;
    padding: 20px 20px 20px;
}

#floatright {
    margin: 10px;
    float: right;
}

nav a {
    margin: 30px;
}
<div id="wrapper">
            <nav>
                <a href="default.aspx">Home</a> <br />
                <a href="application.aspx">Application</a><br />
                <a href="vehicle.aspx">Vehicle</a><br />
                <a href="visa.aspx">Visa</a><br />
                <a href="default.aspx">Loan</a><br />
                <a href="summary.aspx">Summary</a>
            </nav>
            <div id="rightcol">
                <header>
                    <img
                        src="Images/GCSCU_Color.png"
                        alt="Logo"
                        style="float:left;width:120px;height:70px; padding-right:10px"
                    />
                    <h1>CRIF Access</h1>
                </header>
                <main>
                    <h2>
                        This is just a test sentence for the main section of the
                        page.
                    </h2>
                </main>
            </div>
</div>

推荐阅读