Question

我正在构建一个模板，左侧有一个固定的标题和一个固定的侧栏。我的问题是当我缩短窗口并水平滚动时，固定的div与相邻的'。content'重叠。

当我水平滚动时，我不希望修复的'。sidebar1'重叠'。content' div。我该如何解决这个问题？

html,body
{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}

.header
{
	width:100%;
	height:46px;
	position:fixed;
	top:0;
	background:blue;
}

.page_wrap
{
	width:1040px;
	display:block;
	margin:70px auto 0;
	background:purple;
}

.content
{
	width:500px;
	height:1060px;
	display:inline-block;
	background:red;
	color:white;
	margin:5px;
	vertical-align:top;
	margin-left:270px;
}

.sidebar1
{
	display:inline-block;
	width:250px;
	height:500px;
	position:fixed;
	top:70px;
	background:pink;
	margin:5px;
	vertical-align:top;
}


.sidebar2
{
	display:inline-block;
	width:250px;
	background:pink;
	margin:5px;
	vertical-align:top;
}

.footer
{
	width:1040px;
	height:50px;
	margin: 20px auto 0;
	text-align:center;
	background:magenta;
}

<!DOCTYPE HTML>
<html>
	<head>
		<title>Temp</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="temp.css">
	</head>	
	
	<body>
		
		<div class="header">
			Header Content
		</div>
		
		<div class="page_wrap">
			
					<div class="sidebar1">
						sidebar 1
						<div class="test"></div>
					</div>
					
					<div class="content">
						Article Content
					</div>
					
					<div class="sidebar2">
						sidebar 2
					</div>
		</div>
		<div class="footer">Footer</div>
		
	</body>
</html>

Answer 1

我希望我理解你的问题

检查https://jsfiddle.net/LeoAref/47p6r6hq/

<header>Header</header>
<aside>Side</aside>
<section>

   <div class="wide">
      My Wide Content
   </div>

</section>

CSS

header {
   height: 30px;
   line-height: 30px;
   background: red;
   color: #fff;
   text-align: center;
   position: fixed;
   top: 0;
   width: 100%;
   left: 0;
}

aside {
   top: 30px;
   bottom: 0;
   width: 300px;
   background: blue;
   color: #fff;
   text-align: center;
   position: fixed;
   left: 0;
}

section {
   top: 30px;
   bottom: 0;
   left: 300px;
   right: 0;
   background: #000;
   color: #fff;
   text-align: center;
   position: fixed;
   overflow-x: scroll;
}

.wide {
   color: #000;
   width: 1500px;
   background: yellow;
   height: 50px;
}

Answer 2

这样做的原因是技术上固定不会占用页面上的空间。

我注意到你的内容有固定的宽度和高度，这可能是你的第一个问题。大容器上的固定宽度通常是个坏主意，因为它会破坏页面上的其他内容，或者阻止它以您希望的方式显示。

最终结果应该类似于：

。内容{

~~width:500px; height:1060px;~~

margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;

    }

如果由于某种原因需要它水平滚动，那么我会在position:fixed;上设置div.content并在HTML wrap="off"中添加一个属性，看看是否符合您的要求想要它。

希望这有帮助。欢呼声。

固定div重叠水平滚动上的相邻div

2 个答案: