css - 浏览器调整大小打乱了布局

Question

我正在为一个学校元素设计一个网站。结果进展顺利，但我意识到一个问题。重新缩放浏览器窗口时，布局变得一团糟。我在 google 上搜索了流动布局等，但并没有真正掌握它。我在编码方面真的没有那么多经验，所以我希望更有经验的人能给我一些帮助。

布局 CSS 看起来像这样

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    list-style: none;
    text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*{
    padding: 0.0;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    /*text-align: justify;
    line-height: 16px;*/
    font-family: 'Century Gothic', 'Trebuchet MS', Verdana, Sans-Serif;
    font-size: 12px;
    background-color: #E8E8E8;
}

h1 {
    font-size: 32px;
    margin: 15px 0 10px 0;
    color: #f99929;
    font-weight: normal;
}

h2 {    
    font-size: 24px;
    margin: 10px 0 5px 0;
    color: #f99929;
    font-weight: normal;
}

h3{
    font-size: 18px;
    margin: 5px 0 2px 0;
    color: #f99929;
    font-weight: normal;
}

h4{
    font-size: 18px;
    margin: 5px 0 2px 0;
    color: #f99929;
    font-weight: normal;
}

strong{
    font-weight: bold;
}
em{
    font-style:italic
}

a:link {color:#f7931e;}    /* unvisited link */
a:visited {color:#f7931e;} /* visited link */
a:hover {color:#f7641e;}   /* mouse over link */
a:active {color:#f7931e;}

.clear { 
    clear: both;
}

/* Left and right menu */

.menuholder {
    position: relative;
    width: 160px;
    height: 1px;
    float: right;
}

.facebooklike {
    position: fixed;
    top: 400px;
    margin-top: 20px;


}   

.sidemenu {
    position: fixed;
    top: 166px;
    background-color: #FFF;
    box-shadow: 0px 3px 5px #888888;
    -moz-box-shadow: 0px 3px 5px #888888;
    -webkit-box-shadow: 0px 3px 5px #888888;
    margin-top: 60px;
}

.sidemenu h1{
    font-size: 18px;
    margin: 10px 0 10px 10px;
}

.sidemenu ul li a {
    display:block;
    color: #000;
    width: 155px;
    font-size: 15px;
    padding: 3px 0 10px 5px;

    text-align: left;
}

.sidemenu ul li a:hover{
    background-image: url('../images/menubutton.png');
    box-shadow: 0px 3px 5px #888888;
    -moz-box-shadow: 0px 3px 5px #888888;
    -webkit-box-shadow: 0px 3px 5px #888888;
}

.sidemenu ul li ul {
    display:block;
}

.sidemenu ul li ul li a{
    font-size: 14px;
    padding-left: 10px;
    width: 130px;
    border: none;
}

.sidemenu ul li ul li a:hover{
    padding-left: 10px;
    background-color: #f99929; 
}
.sidemenu ul li ul li a:active{
    padding-left: 15px;
    width: 145px;
    background-color: #f99929; 
}

/* Main div */
#Main {
    position: relative;
    width: 960px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 240px;
}

#ContentContainer {
    line-height: 150%;
    /*float:left; */
    padding: 30px 40px 20px 40px;
    margin: 20px auto 0px auto;
    width: 525px;
    min-height: 480px;
    background-color: #FFF;
    box-shadow: 0 0 30px #B8B8B8;
    -moz-box-shadow: 0 0 30px #B8B8B8;
    -webkit-box-shadow: 0 0 30px #B8B8B8;
}

#ContentContainer p {
    padding-bottom: 12px;
}

/* Footer */
#Footer {
    margin: 0 auto;
    border-top: solid #B8B8B8 1px;
    width: 400px;
    height: 40px;
    background-color: #FFF;
    padding-left: 20px;
}

/* Header */
#Header {
    background-repeat: no-repeat;
    background-position: center;
    height: 220px;
    width: 100%;
    position: fixed;
    top: 0px;
}

.logotype {
    float: left;
    position: relative;
    left:0px;
    z-index: 2;
    height: 150px;
    width: 200px;
    margin: 10px 10px 10px 10px;
    background-image: url('../images/loggan.png');
    background-repeat: no-repeat;

}   
/* Top menu */
#navigation {
    font-family: 'Century Gothic', 'Trebuchet MS', Verdana, Sans-Serif;
    width: 100%;
    height: 20px;
    margin: 0px 0 0 65px;
    /*background-color: rgba(3,3,3,0.5);*/
}

#navigation ul {
    margin: 0 auto;
    width: 800px;
}

#navigation ul li {
    float: left;
    margin: -0px 0px -0px 0px;
    box-shadow: 0px 2px 2px #888888;
    -moz-box-shadow: 0px 2px 2px #888888;
    -webkit-box-shadow: 0px 2px 2px #888888;
    background-image: url('../images/aktivbutton.png');
    /* border: 0px solid #000; border-radius: 5px; */
}

#navigation ul li a {
    display: block; 
    width: 120px;
    padding: 3px 0px;
    font-size: 21px;
    text-align: center;
    color: #000;
    /*border: solid 1px #fbad18;*/
}

#navigation ul li a:hover {
    background-image: url('../images/topbutton2.png');
    /* border: 0px solid #000; border-radius: 5px; */
    background-repeat: repeat-x;
    background-position: left;
    background-color: rgba(249,153,41,0.9);
    color: #000;
}

#navigation ul li a:active {
    color: #000;
}

#navigation ul li:hover ul {
    display: block; 
}

#navigation ul li ul {
    position: relative;
    top: 0px;
    left: 0px;
    display: none;
    float: left;
    width: 120px;
}

#navigation ul li ul li {
    margin: 0px;
}
#navigation ul li ul li a{
    padding:5px 0px 10px 0px;
    font-size: 16px;
}   

页面布局的 HTML 文件。

<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <link rel="shortcut icon" href="favicon.gif" type="image/x-icon">
        <% base_tag %>
        <meta charset="utf-8">
        <meta property="og:title" content="Trappan"/> 
        <meta property="og:site_name" content="Trappan"/> 
        <title>Trappan - $Title</title>
        <% require javascript(themes/anka/javascript/jquery-1.9.1.js) %>
        <% require javascript(themes/anka/javascript/easing.1.3.js) %>
        <% require javascript(themes/anka/javascript/effects.js) %>
        <% require javascript(themes/anka/javascript/jquery.cycle.all.min.js) %>
        <% require javascript(themes/anka/javascript/jquery-ui.js) %>
        <% require themedCSS(layout) %> 
        <% require themedCSS(news) %> 
        <% require themedCSS(lunch) %> 
        <% require themedCSS(screen) %>
        <% require themedCSS(accordion) %>

    </head>



    <body>
        <div id="fb-root"></div>
            <script>(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1&appId=371408952950291";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>

<style>
        label {
                display: inline-block;
                width: 5em;
                          }
</style>
    <script>
            $(function() {
            $( document ).tooltip({
            track: true
        });
    });
                    </script>

                <script>
                      $(function() {
                        $( "#accordion" ).accordion({ heightStyle: "content" });
                      });
                </script>

                 <script>
                      $(function() {
                        $( "#accordion" ).accordion({
                          collapsible: true
                        });
                      });
                  </script>

        <div id="Main">
            <div id="ContentContainer">
                $Content
                $Layout
                $Form
            </div>
            <% include rightmenu %>
        </div>


        <% include headermenu %>    
    </body>

</html>

我希望你能帮助我。因为我迷路了。

Answer 1

如果我没看错你的问题，我相信 Stop the browser from pushing everything around when I resize可能会解决你的问题。我前一段时间遇到过这个问题，我可能用过这个或者我用过

    Position: Fixed;

但这又是一段时间前的事了，所以我不确定。