Html 当浏览器改变大小时，网页变得凌乱

我不是一个很有天赋的网页设计师，所以当浏览器改变大小时，我很难让我的网页保持得体。它变得一团糟，看起来糟透了

当浏览器处于全尺寸时，页面看起来很好

这是重新调整浏览器大小之前的样子：

这就是浏览器变小后的外观：

只有在水平调整浏览器大小时才会发生这种情况

这是我的CSS：

我不能找出我的错误，因为我不太擅长HTML/CSS。这不是我的领域，所以我自己缺乏解决这个问题的知识

谢谢你的帮助

编辑 我修复了侧边栏和黑暗内容空间的问题我没有做到的是，当屏幕变小时，防止上部菜单（顶部导航）项掉落。

我只是在侧栏中更改了这个：

width: 270px;

到

---

简单地说，如果没有可查看的登台URL，很难进行调试。无论如何，您的问题是因为您没有使用流体开发实践。也许试着用谷歌搜索一下如何开发流体开发。想法是使用%和em以及基本css字体大小。另外，你可能想看看bootstrap3。

看起来你是从一楼进来的。在这一领域起步的最佳资源是Ethan Marcotte的响应式网页设计。在这里查看：

嗨，我刚看到你的小提琴。。。有几个问题：

• 第一，您正在使用%设置

  宽度

  ，这与浏览器大小有关，您可以设置

  最小宽度

  和

  最大宽度

  ，以避免此问题

• 尝试在html中的第一个框是

  float:left

  ，然后是

  float:right

• 我不明白你为什么用

  position:absolute

  作为外部分区

---

用你的小提琴观看这个演示。首先，你应该对你的问题做一个简单的解释，因为仅仅使用css，我看不出到底发生了什么

现在，据我所知，在某些元素中使用绝对宽度值。您应该看看如何使用%值。您还应该通过css查看媒体查询。例如，当浏览器的宽度非常小时，如果侧栏被隐藏或位于主窗口下方，则效果会更好

你可以通过使用

@media screen and (max-width: 800px){
    #sidebar {
        display:none;
    }

如果浏览器窗口的宽度调整到800px以下，这将隐藏侧边栏 或

这将使边栏位于主窗口下方，如果浏览器窗口的大小调整到800px以下，则将边栏调整为其父元素的全宽

当然，媒体查询应该与css的其余部分共存

---

啊，我看你加了一把小提琴。如果你想让你的边栏保持270px的宽度，你可以用这个容器

.container {
   width: calc(100% - 275px);
   ...
   ...
   }

---

是的，我听说过这个学期。我听说它可以让一个网站为一切做好准备，包括智能手机。嗯，我不需要走那么远，因为我的网站只能通过计算机访问。我的网页在本地主机上，我无法提供它的URL。我能做的就是为您提供这个JSFIDLE：这已经不是什么大不了的事了；我对结果很满意。我仍然无法使顶部导航项目保持在一行，而不发生故障并从其黑色栏中退出。请看我的小提琴顶部导航没有发生故障。。。只需设置最小宽度当浏览器调整大小时，您希望发生什么？如果您不介意滚动，那么可以使用@Danko建议的

minwidth

和

max width

。如果你想重建菜单，你可以尝试一些方法。但是你想发生什么呢？

@media screen and (max-width: 800px){
    #sidebar {
        float:none;
        width:100%
    }

.container {
   width: calc(100% - 275px);
   ...
   ...
   }