Question

<!DOCTYPE html>
<html>
<head>
  <title>ECA</title>
  <link rel="stylesheet" href="css/DeskTop_Layout.css" type="text/css" />
  <style>
    html, body
   {

 height:100%;
   }
   *
   {
 margin: 0;
 padding: 0;
    }

   #wrapper
   {
 min-height: 100%;
   }

   #header
   {
   background-color: #CDCCDB;
   }

   #footer
   {
background-color: #CDCCDB;
margin-top: -50px;
height: 50px;
clear: both;

    }

    #content
  {
background-color: #DBE3CC;
position:absolute;
padding-bottom: 50px;

   }

   #ECUInformation
  {

width: 44%;
border-width: 1px;
border-style: solid;
border-color: #5F5D63;
border-radius: 8px;
float: left;
padding: 1%;
  }

  </style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        header</div>
    <div id="content">
         <div id="ECUInformation">
        <form class="ECUInfo">
        <select id="ProjectType" name="ProjectType">
            <option selected="selected" id="default" disabled>Project Type</option>
            <option>SelectBoxIt is:</option>
            <option value="a jQuery Plugin">a jQuery Plugin</option>
            <option value="a Select Box Replacement">a Select Box Replacement</option>
            <option value="a Stateful UI Widget">a Stateful UI Widget</option>
        </select>
        <select id="CustomerGroup" name="CustomerGroup">
            <option selected id="default" disabled>Customer Group</option>
            <option value="SelectBoxIt is:">SelectBoxIt is:</option>
            <option value="a jQuery Plugin">a jQuery Plugin</option>
            <option value="a Select Box Replacement">a Select Box Replacement</option>
            <option value="a Stateful UI Widget">a Stateful UI Widget</option>
        </select>
        <input type="text" id="QCNumber" name="QCNumber" placeholder="QC Number" />
        <input type="text" id="ReferenceNumber" name="ReferenceNumber" placeholder="Reference Number" />
        <input type="text" id="ECUFamilyName" name="ECUFamilyName" placeholder="ECU Family Name" />
        <input type="submit" id="ECUInfosubmit" value="Submit ECU Information" />
        </form>
    </div>
    <!--  <div id="statuswindow">
        </div> -->
</div>
    </div>
</div>
<div id="footer">
    footer</div>
</body>
</html>

上面是我带有样式的HTML标记。当我调整浏览器大小而没有重叠页脚和内容div时，如何强制使用垂直滚动条。如果我从内容中删除了poition属性，我会得到这个。但有没有办法做到这一点除去？

Answer 1

尝试使用：

.content {
    overflow: auto;
}

在浏览器调整大小时提供垂直滚动条

1 个答案: