Question

我的网站包装程序不会填满页面的整个高度。我尝试将最小高度调整为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>

Answer 1

尝试：

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>

Answer 2

请提供height: 100%;和margin: 0;的HTML和正文。

您的CSS将进行以下更改：

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

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

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

查看有效的jsfiddle-here

Answer 3

在这种情况下，用vh代替高度，而不是使用视口单位：

html, body {
    min-height:100vh;
    margin:0;
}
body {
    font-family: Verdana, Arial, sans-serif;
    background-color: #00005D;
}
#wrapper {
    background-color: #b3c7e6;
    width: auto;
    min-height: 100vh;
    overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="CSS/StyleSheet1.css" rel="stylesheet" />
      <title>CRIF Access Homepage</title>
      <meta charset="utf-8">
   </head>
   <body>
      <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>
   </body>
</html>

我想知道为什么要（或需要）包装纸，而只能用身体做这项工作。

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

3 个答案: