无论浏览器窗口大小如何，都保持我所有的 div 不变答案

【问题标题】：Keeping all my divs fixed, regardless of browser window size无论浏览器窗口大小如何，都保持我所有的 div 不变
【发布时间】：2015-07-22 00:34:26
【问题描述】：

所以我对网页设计/开发还很陌生，并且一直在做一个简单的网站，它做的不多，只是为了掌握它的窍门。当我的浏览器处于最大屏幕时，我的网页看起来非常好，但是当我缩小窗口时，我的所有 div 和一切都在移动，突然之间它看起来一团糟。我怎样才能让这不会发生。

这是代码以防万一...对于有经验的人来说可能看起来一团糟，但无论如何都是这样：

样式.CSS 文件

   body{
    background-image:   url(Images/background.gif);
    background-repeat:repeat-x;
    background-size: cover;
    }
    .topBar{
    width: 100%;
    top: 0;
    height: 50px;
    position: fixed;
    right: 0;
    -webkit-box-shadow: 0px 0px 8px 0px #000;

    background-image:url(Images/topBar2.gif);
    }
    #logoImage{
    float: left;
    width: 180px;
    height: 50px;
    top: 0;
    margin-left: 380px;
    background-image: url(Images/images/topBar_02.gif);

    }

    .topBar h1{
    float: left;
    margin-left: 400px;
    color: white;
    top: 0;
    font-family: Tahoma, Geneva, sans-serif;
    text-align:justify;
    text-shadow: -1px -1px 1px #000;

    }
    .logoImage {
    top: 0;
    float: left;
    margin-left: 100px;
    }
    #btn{
    cursor:pointer;
    border-radius: 4px;
    border: 1px solid #039;
    font: 16px bold  Tahoma, Geneva, sans-serif;
    color: white;

    background-color: #0499ff;

    padding 4px;


    }
    .searchBox {
    float: right;
    margin-top: 7px;

    padding-right: 500px;


    }
    .searchBox input{
    border-radius: 5px;
    padding:4px;

    color:#666;
    font:  "Times New Roman", Times, serif;

    }

    .topBar img{
    width: 40px;
    height:20px;
    margin: 20px;
    margin-left: 400px;
    }
    .mainLogin{
    border: 1px solid  #999;
    border-radius: 6px;
    width: 300px;
    height: 100px;
    margin-top: 300px;
    float: right;
    margin-right: 500px;
    position: fixed;
    background-image:url(Images/login_back2.gif);
    padding: 20px;



    }
   .mainLogin input{
    border-radius: 5px;
    padding: 4px;

    }
    .username{
    width: 300px;

    }
    #rmbrme{
    float:right;
    color: #999;
    text-shadow:-.3px -.3px .3px #000;
    margin-right: 110px;
    margin-top: 3px;
    font: 10px Georgia, "Times New Roman", Times, serif;

    }
    #rmbrme a{
    text-decoration: none;
    color: #999;
    text-shadow: -.3px -.3px .3px #000;
    }

【问题讨论】：

标签： html css

【解决方案1】：

响应式设计、媒体查询和流畅的布局是您所追求的 (:

CSS: Align an element based on screen size

【讨论】：

感谢您给我一个可以查看的地方，我尝试在 google 中输入，但就是想不出具体要搜索什么
很好，如果您需要进一步的内容，请写信

【解决方案2】：

我建议简单地让你最外层的 div 具有相对的位置属性

style="position:relative"

然后简单地定位其余的内部元素，我希望你的问题会得到解决

【讨论】：

这有帮助，我还使用了 min-width: xPX。这有助于防止元素移动

【解决方案3】：

好吧，我也是网络开发的新手，您可以使用一个外部容器来固定“视图窗口”的大小，这样在调整浏览器大小时，您的所有 div 和滚动条都将保持固定似乎会显示所有数据。

例如，您可以尝试以下操作：

<body>
     <div class="outercontainer">
           <div class="innercontainer">
            Do all you stuff here
           </div>
     </div>
</body>

在 css 表单中：

.outercontainer{
      height:100%;
      width:100%
}
.innercontainer{
      height:800px;
      width:1200px
}

或者类似的东西。

【讨论】：

【解决方案4】：

使用float:left 和float:right 并不是更好的方法。我猜position:fixed 标记和浮动标记弄乱了您的网站。

使用单独的对齐类，例如：

.leftalign
 { 
   float:left;
   position:static;
 }

【讨论】：