Question

有很多关于此的例子，但没有一个对我有用。我的网页上有几张表，它们位于<div>内（我用作背景，因为它不会覆盖整个屏幕），但每当窗口调整大小或放大/缩小时一切都掌握在其他一切之上，这是一团糟。

我的目标：我希望它看起来像Stack Overflow，无论你调整大小或放大或缩小所有内容都保持不变，没有任何动作。这就是我的背景和表格：

#bluebackground {
    background-color: #a4ceff;
    height: 50%;
    width: 90%;
    position: absolute;
    top: 20%;
    left: 5%;
}

.table1 {
    color: white;
    margin-bottom: 10px;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: bold;
    border-collapse: collapse;
    border: 3px solid white;
    border-radius: 3px;
    width: 90%;
    top: 50%;
    left: 5%;
    padding-bottom: 0px;
    position: relative;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 100px;
    font-size: 80%;
}

Answer 1

您应该停止使用％来定义宽度和高度，因为％width / height mean是根据父元素更改宽度/高度。如果您的父元素是窗口，那么每当您更改窗口大小时，元素内部也会更改大小。相反，为元素提供固定的大小

#bluebackground {
background-color: #a4ceff;
height: 500px;  //change all the % to actual pixel 
width: 500px;
position: absolute;
top: 200px   //change all the % to actual pixel 
left: 20px;
}

.table1 { // and all these, however you can choose to stay % on table
width: 200px;
top: 100px;
left: 20px;
font-size: 14px; 
}

请参阅： http://jsfiddle.net/Y6bcZ/，您可以尝试上下移动显示窗口，div不会改变大小

至于每个元素的像素数，你必须自己弄清楚它们。我用％离开了表，因为父div（bluebackground）现在是固定大小，所以表不会改变大小

调整大小或缩放浏览器窗口时移动的元素

1 个答案: