Html 扩大浏览器窗口时，面板位置会发生变化

我面临的情况是： 我有一个asp.net，有一个标题、侧栏和另一个右侧侧栏。问题是当我在浏览器中执行我的网站并模拟浏览器窗口时。左侧的侧边栏在内容页上跳转，控件混合在一起。请参阅图片了解想法

另一个问题是，当我以更宽的屏幕分辨率运行该网站时，控件（面板）的边距更大，所有内容看起来都更宽

有没有办法解决这个问题？ 先谢谢你

编辑：

侧面板（右）CSS代码：

#droite
{
    position: fixed;
    top: 22.5em;
    right: 5%;
    width: 13%;
    background-color: White;
}

---

我在我的网站（firedrake969.github.io）上所做的就是添加一些简单的jQuery代码，以便在窗口变得太小时隐藏侧边栏。如果您不介意使用jQuery，我认为这是一种方法。但是，如果您不想使用jQuery，我不认为如果浏览器窗口太小，

position:fixed

可以使用CSS/HTML隐藏条。

您可能需要类似的东西。

max width

可以设置为您选择的任何屏幕宽度

 @media screen and (max-width:768px) {
        #droite
        {
            position: fixed;
            top: 22.5em;
            left:5%;
            width: 100%;
            background-color: White;
        }
    }

---

您可能需要为此发布一些代码。不过，看起来这只是CSS定位的问题。已编辑！添加了侧栏css代码您需要一个媒体查询来更改较小屏幕尺寸的宽度属性。现在它是13%，所以它在一个小的viewport@flybear你能给我建议一段代码吗！以前从未使用过媒体查询，我担心在理解媒体之前我无法提供这些信息queries@user2233979请看答案。如果它解决了您的问题，请接受我不想隐藏面板！我想把它放在窗户全尺寸时放的地方。这是一个通知用户他们在线的面板。隐藏是不符合逻辑的。啊，所以要一直放在文档的最右边？您也可以使用jQuery来实现这一点，或者将所有内容都放在包装器div中。