时间戳

首页 > 解决方案 > 将 div 放置在固定 div 下方和另一个固定 div 的右侧

html - 将 div 放置在固定 div 下方和另一个固定 div 的右侧

问题描述

我查看了其他一些答案，但它们似乎都不适用，因为虽然我的固定 div 的尺寸是固定的，但在页面实际呈现之前它们是未知的。

我有一个固定的标题 div，然后是另一个 div。第二个 div 包含一个侧边栏 div，最后是内容 div：

<header>stuff</header>
<div id="wrapper">
    <nav>sidebar stuff</nav>
    <div id="content">Content</div>
</div>

包装器用于display: flex将侧边栏和内容 div 并排放置。

我目前的目标是在滚动时修复标题和侧边栏。问题是position: fixed标题和侧边栏脱离了常规流程，这使得内容 div 很难相对于它们定位。作为奖励，我不知道标题/侧边栏的尺寸，直到它们呈现，所以我不能只position: absolute在内容 div 上做。

我正在使用 React，因此希望避免手动 DOM 操作（例如 jQuery）。

标签： htmlcss

解决方案

这是代码。希望它会帮助你。如果有任何变化，请告诉我。

*{ 
    margin: 0px;
}

#sidebar {
	/*Strictly Necessary */
	position:fixed; 
	height: 100%;
	width:30%;
	margin: 0px;  

  /*Aesthetics*/
  background: lightblue; 
  border-radius: 7px;  
}


#rightSideWrapper {
	/*Strictly Necessary */
	width:70%; 
	float: right;

	/*Aesthetics*/
	background: black;	
}

header {
	/*Strictly Necessary */
	position: fixed;
	width: 70%;	
	height: 100px; /*Adjust the hight to your purposes*/
	
	/*Aesthetics*/
	background: lightSalmon;
	border-radius: 7px;
}

.ContentBox{
	margin-top: 100px; /*The height of the   header*/
	display:flex;
	flex-flow: row wrap;
} 

main, section, footer {
    /*Aesthetics*/
	 background: lightgray; 
	 border-radius: 7px; 
	 margin: 5px; 
	 padding: 20px;
}

main {
  /*Strictly Necessary */
  height: 400px;
  order: 1;
  flex: 0 1 100%; 
	
}

section {
  /*Strictly Necessary */
   height: 400px;
   order: 2;
   flex: 0 1 100%;
	
}

footer {
  /*Strictly Necessary */
  height: 100px;
  order: 3;
  flex: 0 1 100%;
	
}
<html>
<!--...-->
	<head>
		<meta charset="utf-8">
		<title> Ghost </title>
		<link rel="Stylesheet" href="css/style.css">
	</head>
  
	<body>
    
		<div id="sidebar">
			Side Content
		</div>
		<div id="rightSideWrapper">
			<header> 
				Header 
			</header>
			
			<div class="ContentBox"><!--. poner en minusculas.-->
				<main> 
					Main Content 
				</main>

				<section>
					Section Content
				</section>

				<footer> 
					Footer 
				</footer>

			</div>
			
		</div>

	</body>
	

	

</html>

您可以使用此代码。

https://jsfiddle.net/gqsaedr7/2/

* {
  padding: 0;
  margin: 0;
}

header {
  background: black;
  padding: 15px;
  position: fixed;
  width: 100%;
}

#wrapper {
  display: flex;
  height: 100vh;
  padding-top: 50px;
}

#navbar {
  background: pink;
  width: 20%;
  position: fixed;
  height: 100vh;
}

#content {
  background: lightblue;
  width: 100%;
  padding-left: 20%;
}
<header>Header</header>
<div id="wrapper">
  <nav id="navbar">sidebar stuff</nav>
  <div id="content">
    <div class="class-1">
      ABC
    </div>
    <div class="class-2">
      XYZ
    </div>
  </div>
</div>

推荐阅读