html - 试图弄清楚如何使网站滚动

问题描述

我知道我的 CSS 中应该有一个错误，但我不知道是哪一个导致页脚出现在日历前面。

日历位于实验室内容 div 中，而页脚位于该 div 之外。

到目前为止，我已经尝试删除position:fixed页脚；然后它浮动到页面顶部（有margin-top:auto;和没有它）

我只想弄清楚如何仅启用滚动我的页面。

body {
  line-height: 1.5;
  padding: 0;
  margin: 0;
  background-color: silver;
}

.imagebox {
  width: 450px;
  height: 350px;
  display: flex;
  float: left;
  flex-basis: 75%;
}

.container {
  width: 97%;
  margin: auto;
}

.header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 200px;
  right: 0;
  height: 150px;
  color: black;
  padding-top: 28px;
  min-height: 70px;
  border: 3px solid;
  border: solid;
  border-width: thin;
  border-color: black;
  display: flex;
  flex: 0.5;
  flex-wrap: wrap;
  text-align: center;
  padding: 5px;
  padding-left: 250px;
  padding-right: 250px;
}

.header1 {
  flex: 1;
  text-align: center;
  float: left;
  width: 50%;
  background-color: white;
}

.header2 {
  flex: 1;
  text-align: center;
  float: right;
  width: 50%;
  background-color: white;
}

.flex-container {
  clear: both;
  display: flex;
  float: inherit;
}

h3 {
  padding: 8px 16px;
}

ul {
  list-style-type: none;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.summary {
  flex: 30%;
  width: 50%;
  font-size: 12px;
  border-style: solid;
  border-width: thin;
  border-color: black;
  order: 2;
  background-color: white;
  top: 150px;
  float: left;
  position: fixed;
  bottom: 50px;
  left: 200px;
  right: 600px;
  text-align: justify;
}

.biobox {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  flex: 50%;
  order: 3;
  width: 50%;
  text-align: left;
  border-color: black;
  border-width: thin;
  border-style: solid;
  font-size: 15px;
  top: 150px;
  left: 900px;
  position: fixed;
  background-color: white;
  float: right;
  bottom: 50px;
  overflow-wrap: break-word;
}

.lab-content {
  background-color: silver;
  position: fixed;
  margin-top: auto;
  left: 200px;
  bottom: 50px;
  right: 0;
}

.footer {
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 200px;
  right: 0;
  margin-top: auto;
  text-align: center;
  border: 3px solid;
  border: solid;
  border-width: thin;
  border-color: black;
}

.summarybox {
  position: fixed;
  bottom: 50px;
  left: 190px;
  right: 600px;
  margin-top: 30px;
  text-align: justify;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 12px;
}

.navtext h3 {
  text-align: center;
  padding: 8px 16px;
}

.cal {
  text-align: left;
}

.cal h3 {
  padding: 0 0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Tony's Calendar
    </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="newIt207.css" type="text/css"/>
    <link rel="stylesheet" href="calendar.css" type="text/css"/>

 </head>
<body>
 <div class ="container">
    <header>
    <?php
        include('header.php');
    ?>
    </header>
    <div class = "flex-container"> 
        <?php 
            include('menu.ssi');
        ?>
    
        <div class = "lab-content">
        <div class ="input_option">
        <form method = "post" action = "calender.php">
            <input type = "text" name = "name" center>Student name
            <input type = "text" name = "email" center>Email 
            <input type = "submit" value = "submit">
         </div>
         
        <?php

        
        
            date_default_timezone_set("America/New_York");

            $current_year = date("Y"); 
            
            $current_month = date("m"); 
            $daysinmonth = date("t");
            $d = mktime(0,0,0, $current_month, 1, $current_year);
            $day_of_week = date('w',$d);
            $day_array= array("Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday");
            $title = date('F');
            $blank = 0;
            switch ($day_of_week) {
              case 0: $blank = 0; break;
              case 1: $blank = 1; break;
              case 2: $blank = 2; break;
              case 3: $blank = 3; break;
              case 4: $blank = 4; break;
              case 5: $blank = 5; break;
              case 6: $blank = 6; break;
              
                }
            
            echo "<h1><b>" .$title."&nbsp".$current_year."</h1></b>" ;  
            echo "<div class ='table'>";
             
            echo "<div class='table_body'>";
            echo "<div class='table_row'>";
              foreach($day_array as $value)
              {
                  echo "<div class ='table_header_cell'>".$value."</div>";
              }
              echo "</div> </div>";
              
              $day_count = 1;
              echo "<div class='table_body'>";
              echo "<div class='table_row'>";
              
              while ($blank > 0) {
                    echo "<div class='table_cell'></div>";
                    $blank = $blank-1;
                    $day_count++;
                }
                 $day_num = 1;
                while ($day_num <= $daysinmonth) {
                    echo "<div class='table_cell'>$day_num</div>";
                    $day_num++;
                    $day_count++;
                    
                    if ($day_count > 7) {
                    echo "</div></div><div class='table_body'><div class='table_row'>";
                    $day_count = 1;
                }
                }
                 while ($day_count > 1 && $day_count <=7) {
                    echo "<div class='table_cell'></div>";
                    $day_count++;
                }

               echo "</div> </div>";
              echo "</div>";
            ?>
        </div>
         <div>
    <?php 
        include('footer.ssi');
    ?>
 </div>
    </div>

 </div>
 
 </body>
 </html>

标签： htmlcss

html - 试图弄清楚如何使网站滚动

问题描述

解决方案

推荐阅读