Question

以下是我网站的理想外观 http://i44.tinypic.com/jayyhu.jpg

但它在所有计算机中看起来都不一样。我用browsershots检查了它。 org和我的网站几乎在所有浏览器中都搞乱了。当我调整浏览器大小时，它甚至会搞砸。

也许是因为我没有在浏览器调整大小上获得横向滚动。请告诉我一些解决方法。

我的网站网址是 http://come2chat.x10host.com

如果没有打开，请刷新窗口。我在开发期间使用免费的虚拟主机，所以它不可靠。

Answer 1

我认为最大的问题是你使用边距和填充来将内容集中在屏幕上，这会让一切变得更加困难。

相反，创建一个包裹div并将margin: 0 auto;设置为它。

我在您的网页上进行了这么小的更改，您可以在此处查看：

http://www.radiogramola.cat/stack/u.html

我只添加了两个带有“wrapper”类的div和一些CSS重置。您可以查看代码。

然后，您应该决定要创建哪种布局：

已修复：与stackoverflow.com类似，当用户调整窗口大小时，页面不会更改。
流畅：与wikipedia.org一样，它会扩展占用所有可用空间并使其自身适应浏览器大小。
响应式：与css-tricks.com一样，它会根据浏览器大小更改布局。

您可以通过直观的说明观看此视频：

http://blog.teamtreehouse.com/whats-the-difference-between-fixed-fluid-adaptive-and-responsive-web-design-treehouse

根据您的决定，您接下来的步骤会有所不同。

Answer 2

问题在于您的布局。您有固定的宽度和高度（以像素为单位）。当您调整窗口大小时，它们将坚持其高度和宽度，并且不会相应地调整大小。所以内容重叠或跳跃。

以百分比形式修复所有内容。这是你能得到的最好的。

我在下面放了一个演示。

<body id="library">


        <div id="body">

            <div id="sidebar"></div>

            <div id="content">

                <div id="navbar"></div>

                <div id="contentwindow"></div>

            </div>

        </div>


</body>

css

html {
  height: 100%;
  width: 100%;
}
#library {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
#library #body {
  width: 90%;
  height: 90%;
  background-color: gray;
  margin: 3% 5%;
}
#library #body #sidebar {
  display: inline-block;
  width: 20%;
  height: 90%;
  background-color: #8eeeff;
  margin: 2%;
}
#library #body #content {
  display: inline-block;
  width: 70%;
  height: 90%;
  background-color: red;
  margin: 2%;
}
#library #body #content #navbar {
  width: 90%;
  height: 20%;
  background-color: blue;
  margin: 3% 5%;
}
#library #body #content #contentwindow {
  width: 90%;
  height: 70%;
  background-color: green;
  margin: 3% 5%;
}

运行此操作并调整窗口大小。

我的网站搞乱浏览器调整大小

2 个答案: