Question

我正在建立一个网站来托管游戏Crysis Wars的在线游戏服务器列表，并且刚刚发现它在Adobe Fireworks中开发设计要容易得多，并在之后添加相关代码。

我正在设计的当前网页在页面中央有一个登录框，效果很好。也就是说，直到我们改变浏览器窗口的大小。

这是通常看起来的网页： enter image description here

显示正确，但这里是浏览器窗口调整大小时的屏幕截图：

enter image description here

可以看出，这是页面的一个问题，因为访问者将有不同的屏幕分辨率，这个问题很容易再次发生。

我的问题是，如何强制这两个CSS对象保持其位置，从不重叠？这很麻烦，因为登录框在网页上居中。

可以在crysis-or.eu查看该网页（请不要谴责我在实时网站上进行开发）。

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
    <head>
        <title>Server Portal | Login</title>
        <link href="./css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="navbar">
        </div>
        <div class="loginui">
        </div>
    </body>
</html>

CSS：

body {
    width:100%;
    margin-left:-0px;
    background-color:07080A;
}

body > .loginui {
    width:400px;
    height:400px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    background:url("http://crysis-or.eu/img/login_b_bg.png") repeat-x;
}

body > .navbar {
    width:500px;
    height:100px;
    position: absolute;
    margin-top:50px;
    margin-left:100px;

    background:url("http://crysis-or.eu/img/navbar.png") repeat-x;
}

Answer 1

我会推荐以下内容：

将导航栏和登录窗口放在单独的包装器中，以防止它们重叠。您可以将HTML更改为：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
    <head>
        <title>Server Portal | Login</title>
        <link href="./css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header id="top-bar">
            <div class="navbar">
            </div>
        </header>
        <section id="main">
            <div class="loginui">
            </div>
        </section>
    </body>
</html>

Header和Section就像Div一样，唯一的区别就是它们的语义意义。

因为.top-bar和.loginui不再是正文的直接子节点，所以你的选择器将不再起作用。将CSS选择器更改为.top-bar和.loginui，而不是body > .top-bar和body > .loginui。

标题需要指定的高度，并且需要其位置为“relative”或“absolute”。一个绝对定位的子元素绝对定位于最接近的父级也是绝对的或明确相对的。背景颜色仅用于说明目的，将被删除以供制作。

header {
    position: relative;
    height: 200px;
    background-color: red;
}

您希望该部分尽可能多地填充，因此需要绝对定位。 这里的诀窍，即解决问题的方法，是添加一个min-height属性来防止该部分变得比其内容小，从而允许重叠。

section {
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 400px;
    background-color: blue;
}

这对你有用。此解决方案的一个问题是登录窗口将相对于其容器而不是整个窗口居中。它将比您当前的设计低100个像素（标题高度的一半）。为了解决这个问题，如果这对你很重要，你需要使用一种不同的垂直居中方法。将顶部置于50％，然后使用负上边距来补偿高度的一半加上标题高度的一半。因为它有一个固定的高度，这很容易：（400px + 200px）/ 2 = 300px。

.loginui {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 0;
    right; 0;
    margin: -300px auto 0;
    background: url('path/to/login_b_bg.png');
}

Answer 2

如果你添加它，它会在尝试调整浏览器大小时创建一个滚动条而不是将元素放在彼此的顶部

body 
{
    width:100%;
    min-width: 950px; //ADD THIS. It sets the minimum browser width before creating a scroll bar.
    min-height: 550px; // This does the same thing for a vertical scroll bar.
    margin-left:-0px;
    background-color:07080A;
    overflow-y: scroll; // vertical scroll bar
    overflow-x: scroll; //horizontal scroll bar
}

编辑：---------------------------------

在查看您的网站并玩了一下之后，您的最小宽度不是一个重要因素，只是最小高度，如果您设置这样的值，菜单将永远不会重叠。

body 
{
    width:100%;
    height: 100%;
    min-height: 750px; // Stops the menus from touching eachother vertically, but they can still line up in the x-direction.
    margin-left:-0px;
    background-color:07080A;
    overflow-y: scroll; // vertical scroll bar
}

停止两个对象重叠

2 个答案: