html - 调整大小时修复页面布局

Question

我正在为一个学校元素制作一个网站，但遇到了一个问题。每当我调整屏幕大小时，所有内容都会移动并扭曲大小，尤其是列表。有没有一种方法可以让我包装所有元素，以便在调整屏幕大小时(当我水平/垂直拖动它以使其变小时)所有内容都保持原位，我只看到屏幕上的内容更少，需要滚动到看到剩下的了吗？我尝试将所有内容设置为 em/px，但仍然留下空白和困惑的列表栏。

这是 CSS

#title{
font-family:basic title font;
color:#ffffff;
position: absolute;
left:33%;
top:-2.3%;
font-size:1.6em;
z-index:1;}

#intro{
font-family:basic title font;
color:#636363;
position: absolute;
left:62%;
top:32%;
font-size:2.5em;
 z-index:1;
font-weight:900;}

#schedule{
font-family:basic title font;
color:#636363;
position: absolute;
left:35%;
top:28%;
font-size:3em;
z-index:1;
font-weight:900;
}
#skl {
z-index:100;
position:absolute;
width:34%;
left:7%;
top:37%;
z-index:1;}
#box {
 width:28%;
height:60%;
background-color: #D6D6D6;
position:absolute;
top:48%;
left:54%;
}
#box2 {
width:28%;
height:60%;
background-color: #D6D6D6;
position:absolute;
top:48%;
left:19%;
}
#wordbox1 {
width:28%;
height:30%;
background-color: #D6D6D6;
position:absolute;
top:111%;
left:19%;
}
#wordbox2 {
width:28%;
height:30%;
background-color: #D6D6D6;
position:absolute;
top:111%;
left:54%;
}

#box3 {
width:26%;
height:6%;
background-color: white;
position:absolute;
top:100%;
left:20%;
}
#box4 {
width:26%;
height:6%;
background-color: white;
position:absolute;
top:100%;
left:55%;
}

#q1{
 width:28%;
 height:14%;
 background-color: #D6D6D6;
position:absolute;
top:144%;
left:19%;
}

#q2{
width:28%;
height:14%;
background-color: #D6D6D6;
position:absolute;
top:144%;
left:54%;
}
#text
{font-family:basic title font;
color:#636363;
    position: absolute;
left:38.5%;
top:1.2%;
font-size:4em;
z-index:1;}
#text2
{font-family:basic title font;
color:#636363;
position: absolute;
    left:55%;
top:1.2%;
font-size:4em;
z-index:1;}
#logo {
position:absolute;
top:5%;
    left:43%;
z-index:1;
width:12%;

}
#midbar {
width:100%;
height:6%;
background-color: #636363;
position:absolute;
top:22%;
}
#bar {
width:100%;
height:160%;
background-color: #F0F0F0;
position:absolute;
top:28%;
}


#midbar2 {
width:100%;
height:17%;
background-color: #D6D6D6;
position:absolute;
top:5%;
}

#midbar3 {
width:100%;
height:5%;
background-color: #636363;
position:absolute;
top:0%;
}

#divider {
width:100%;
height:1%;
background-color: #636363;
position:absolute;
top:88%;
}


body {
color: #fff;
font-family: 'open sans'; 
font-size: 1.1em;
text-align: center;
text-decoration:none;
font-weight:100;
display:inline;
}





#primary_nav_wrap
{
margin-top:15px
}

#primary_nav_wrap ul
{
list-style:none;
position:absolute;
float:left;
margin:0;
top:22%;
left:9%;
padding:0;
max-width:100%;
min-width:50%;
max-height:500px;
min-height:21%;
text-align:center;

}

#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: 'open sans'; 
font-weight:100;
font-size: 0.9em;
color: #ffffff;
text-align:center;
padding-top:0.5em;
padding-bottom:0.5em;
padding-right:4em;
padding-left:4em;


}

#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul ul    
{
display:none;
position:absolute;
top:100%;
left:0%;
text-align:left;
background-color:#636363;

z-index:100;

}

#primary_nav_wrap ul ul li
{
float:none;
    width:187px;
padding-left:1em;
padding-right:1em;

}

#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
}

#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}

#primary_nav_wrap ul li:hover > ul
{
display:block
}


.hvr-fade {
  display: inline-block;

  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
 box-shadow:         inset 0 2px 10px -5px #000000;
  background-color: #2098d1;
  color: white;

z-index:1
}


    #bottomtext {
position:absolute;
bottom:-83%;
left:43%;
font-family:"myriad pro";
font-weight:300;
color:black;
font-size:0.8em;
z-index:10000;}
#bottomtext2 {
position:absolute;
bottom:-89%;
left:44%;
font-family:"myriad pro";
font-weight:200;
color:black;
font-size:0.6em;
z-index:1000000}
#bottom {
width:100%;
height:15%;
background-color: white;
position:absolute;
bottom:-88%;
z-index:1000;
}


a    { text-decoration: none; }
p    { text-align: center; }
sup  { font-size: 36px; font-weight: 100; line-height: 55px; }

.button
{
      text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color: #0C5;

  font-size: 1em;
  font-weight: 300;

  margin: 4em auto;

  position: absolute; 
  top:150%; right:0; bottom:0; left:-34%;

  padding: 10px 0;
      padding-bottom:20px;
  width: 28%;
  height:2%;

  background: #2098d1;
      border: 1px solid #2098d1;
  color: #FFF;
  overflow: hidden;

  transition: all 0.5s;
}

.button:hover, .button:active 
{
  text-decoration: none;
  color: #2098d1;
  border-color: #2098d1;
  background: #FFF;
}

.button span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;

  transition: padding-right 0.5s;
}

.button span:after 
{
  content: ' ';  
  position: absolute;
      top: 0;
  right: -18px;
  opacity: 0;
  width: 10px;
      height: 10px;
  margin-top: -10px;

  background: rgba(0, 0, 0, 0);
  border: 3px solid #2098d1;
  border-top: none;
  border-right: none;

  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-45deg);
}

.button:hover span, .button:active span 
{
  padding-right: 30px;
}

.button:hover span:after, .button:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
      opacity: 1;
  border-color: #2098d1;
  right: 0;
  top: 50%;
}





a        { text-decoration: none; }
p    { text-align: center; }
sup  { font-size: 36px; font-weight: 100; line-height: 55px; }

.move
{
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color: #0C5;

  font-size: 1em;
  font-weight: 300;

  margin: 4em auto;

  position: absolute; 
  top:150%; right:0; bottom:0; left:36%;

  padding: 10px 0;
  padding-bottom:20px;
      width: 28%;
  height:2%;

  background: #2098d1;
  border: 1px solid #2098d1;
  color: #FFF;
  overflow: hidden;

  transition: all 0.5s;
}    

.move:hover, .move:active 
{
  text-decoration: none;
  color: #2098d1;
  border-color: #2098d1;
  background: #FFF;
}

.move span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;

  transition: padding-right 0.5s;
}

.move span:after 
{
  content: ' ';  
  position: absolute;
  top: 0;
  right: -18px;
  opacity: 0;
  width: 10px;
  height: 10px;
  margin-top: -10px;

  background: rgba(0, 0, 0, 0);
  border: 3px solid #2098d1;
  border-top: none;
  border-right: none;

  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-45deg);
}

.move:hover span, .move:active span 
{
  padding-right: 30px;
}

.move:hover span:after, .move:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: #2098d1;
  right: 0;
  top: 50%;
}

这是 HTML!

  <!DOCTYPE html>
 <html>

 <head>
 <meta charset='UTF-8'>
 <link rel="stylesheet" type="text/css" href="sc.css"/>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1,      maximum-scale=1">
     <meta name="robots" content="all,index,follow" />

     <title>KAS</title>
     <meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />


 </head>
 <div id="wrapper"> 
 <body>
 <p id="title">SOUTHERN TAIWAN MODEL UNITED NATIONS</p>
 <p id="intro"></p>
 <p id="schedule">SECURITY COUNCIL</p>
 <p id="text">20 </p>
 <p id="text2">15 </p>

 <p id="bottomtext">Kfiller Afiller Sfiller <br>
 www.filler.com </p>
 <p id="bottomtext2">(c) 2015 by FIller Filler Filler</p>
 <div id="bottom"></div>

 <img id="logo" src="images/logo2.png">
 <div id="topbar"></div>
 <div id="midbar"></div>
 <div id="midbar2"></div>
 <div id="midbar3"></div>
 <div id="bar"></div>
 <div id="bar2"></div>
 <div id="box"></div>
 <div id="box2"></div>
 <div id="box3"></div>
 <div id="box4"></div>
 <div id="q1"></div>
 <div id="q2"></div>
 <div id="wordbox1"></div>
 <div id="wordbox2"></div>
 </div>


 <a href="#" class="button">
   <span>Download Chair Report</span>
 </a>

 <a href="#" class="move">
   <span>Download Chair Report</span>
 </a>


 <div id="whitebox"></div>
 <!--<div id="divider"></div>--!>

 <img id="skl" src="">


 <nav id="primary_nav_wrap">
 <ul>
   <li class="hvr-fade" class="current-menu-item"><a href="#">HOME</a></li>
        <li class="hvr-fade" ><a href="#">INTRODUCTION</a></li>

   <li class="hvr-fade"><a href="#">COMMITTEES</a>
     <ul >
  <li class="hvr-fade"><a href="#">Security Council</a></li>
  <li class="hvr-fade"><a href="#">CDIS</a></li>
  <li class="hvr-fade"><a href="#">ECOSOC</a></li>
  <li class="hvr-fade"><a href="#">HRC</a></li>
  <li class="hvr-fade"><a href="#">General Assembly 1</a></li>
  <li class="hvr-fade"><a href="#">General Assembly 2</a></li>
  <li class="hvr-fade"><a href="#">General Assembly 3</a></li>

     </ul>

   <li class="hvr-fade"><a href="#">CONTACT</a></li>
  <li class="hvr-fade"><a href="#">NEWS</a></li>
    <li class="hvr-fade"><a href="#">MORE</a></li>

 </ul>
 </nav>

这是我的第一个网站。感谢您的任何和所有输入! :D

Answer 1

首先是 <div id="wrapper">应该在 body 标签里面

要解决您的问题，请尝试在 CSS 中将 min-width 设置为 body。

例如。

body{
min-width:720px;//or whatever value
}

如果屏幕宽度小于 720px 会出现水平滚动条