我创建了一个网站，该网站有多个 <div>在所有<div>的 body 里固定在它的位置，但只有 <div class = "content">可以滚动。
这是我的 Master.Page 的 HTML 结构；
<body>
<form id="form1" runat="server">
<div class="navLeft">
</div>
<div class="navTop">
<asp:ContentPlaceHolder id="cphNavTop" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="banner">
<asp:ContentPlaceHolder id="cphBanner" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="divider">
<asp:ContentPlaceHolder id="cphDivider" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content">
<asp:ContentPlaceHolder id="cphContent" runat="server">
(there are several another <div> here for content pages)
</asp:ContentPlaceHolder>
</div>
</form>
</body>
这是我的 CSS 代码；
body
{
margin:auto;
width:1280px;
height:auto;
padding:0px;
}
form
{
width:auto;
height:auto;
}
.navLeft
{
width:60px;
min-height:100vh;
float:left;
text-align:center;
background-color:lightgrey;
border-right:1px solid rgb(0,177,169);
}
.navTop
{
min-width:550px;
height:60px;
background-color:lightgrey;
}
.banner
{
min-width:1200px;
height:75px;
background-color:rgb(235,235,235);
}
.divider
{
min-width:800px;
height:24px;
background-color:rgb(0,177,169);
}
.content
{
width:auto;
height:470px;
}
在我对 CSS 代码进行任何更改之前，我的网站看起来像这样；
注意到我有另一个表，我想这样放它；
当我将 overflow 放入 .content 时，就像这样；
.content
{
overflow:scroll;
width:auto;
height:470px;
}
水平滚动不起作用，因此使我的网站看起来像这样；
所有 <div>在我的 Master.Page 中，除了 <div class="content"> 之外，它的位置是固定的它有自己的滚动条。但是，无论我尝试什么，我似乎都可以让它看起来像第二张图片，其中表格位于 y 侧并且我的水平滚动条被禁用。
我的 CSS 代码中是否缺少某些内容或我的 CSS 代码有一些我不知道的错误？
我希望我的问题是可以理解的。提前致谢。
最佳答案
右边的 table 不适合窗口，所以它在第一个 table 下面。您应该重新计算两个表格的宽度，以便它们可以放在一行中。
如果您希望您的内容在水平方向上滚动，您应该定义编号宽度。不使用自动属性。
关于html - 溢出 :scroll in horizontal direction is not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38114362/