主页 / 问题 / 670955
Accepted
Fangog
Asked:2020-05-26 07:10:31 +0000 UTC2020-05-26 07:10:31 +0000 UTC

html模板框架的布局

  • 772

这样的问题，有个布局https://jsfiddle.net/61htzzrx/

header {
  background-color: #FBD293;
  border-bottom: 1px solid #000;
  height: 50px;
}
.middle {
  border-right: 1px solid #000;
  margin: 0 auto;
  min-height: calc(100% - 50px);
  overflow: hidden;
  position: relative;
  width: 600px;
  background-color: #fff;
}
.middle > .left-sidebar {
  background-color: #CBE6A3;
  border-right: 1px solid #000;
  box-sizing: border-box;
  display: block;
  float: left;
  min-height: calc(100vh - 50px);
  padding-bottom: 160px;
  width: 100px;
}
.left-sidebar > .blocks {
  background: #e6a3a3;
  height: 400px;
}
.middle > .content {
  background: #A3CCFF;
  display: block;
  float: left;
  min-height: calc(100vh - 50px);
  width: 500px;
}
.left-sidebar footer {
  height: 100px;
  bottom: 0;
  position: absolute;
  background: #D6A3E6;
}
<header></header>
<div class="middle">

<aside class="left-sidebar">
  <div class="blocks">
    Блоки, должны быть всегда на виду
  </div>

  <footer>
    Футер<br>всегда внизу
  </footer>
</aside>


<main class="content">
  Контент, должен быть прижат к низу
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
</div>

有必要按.content到底部并确保菜单始终保持在视线范围内（随着滚动移动）

现在我有这些问题：

1）页面右边的黑条aside没有走到尽头，背景aside太

2).blocks应该随着页面滚动而不是爬到footer

html

2 个回答

  1. 这是根据您所说的要修复的标准的示例：

    这是一个标准的布局CSS，我不知道解释什么，如果你有问题，请告诉我。

    这是代码：

    	body{
	  margin: 0;
	}
	header {
		background-color: #FBD293;
		border-bottom: 1px solid #000;
		height: 50px;
	}

	.middle {
		border-right: 1px solid #000;
		margin: 0 auto;
		min-height: calc(100% - 50px);
		overflow: hidden;
		position: relative;
		width: 600px;
		background-color: #fff;
	}

	.middle > .left-sidebar {
		position: fixed;
		top: 0;
		z-index: 1000;
		background-co
		background-color: #CBE6A3;
		border-right: 1px solid #000;
		box-sizing: border-box;
		display: block;
		width: 100px;
		height: 100%;
	}

	.left-sidebar > .blocks {
		background: #e6a3a3;
		height: 100%;
	}

	.middle > .content {
		position: relative;
		background: #A3CCFF;
		display: block;
		float: left;
		min-height: calc(100vh - 50px);
		width: 500px;
		padding-left: 100px;
		padding-bottom: 50px;
	}
	.content_footer{
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 50px;
	  background: yellow;
	}
	body>footer {
		height: 100px;
		background: #D6A3E6;
	}
    	<header></header>
	<div class="middle">
	  <aside class="left-sidebar">
		<div class="blocks">
		  Блоки, должны быть всегда на виду
		</div>
	  </aside>
	  <main class="content">
		<div class="content_footer">
		  Контент, должен быть прижат к низу
		</div>
	  </main>
	</div>
	<footer>
	  Футер<br>всегда внизу
	</footer>

    • 3
  2. Best Answer

    1. 侧边栏使用 粘在块内position: sticky，为了跨浏览器的兼容性，不要忘记使用 polyfill。

    2. 剩下的就是 flexbox。

    *,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  background-color: #FBD293;
  border-bottom: 1px solid #000;
  height: 50px;
  width: 600px;
}

.middle {
  border-right: 1px solid #000;
  margin: 0 auto;
  width: 600px;
  background-color: #fff;
  display: flex;
  flex-grow: 1;
}

.left-sidebar {
  position: relative;
  background-color: #CBE6A3;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  flex-basis: 100px;
}

.left-sidebar__blocks-holder {
  position: relative;
  flex-grow: 1;
}

.blocks {
  background: #e6a3a3;
  height: 400px;
  position: sticky;
  top: 0;
}

.content {
  background: #A3CCFF;
  min-height: 800px;
  flex-grow: 1;
}

.left-sidebar footer {
  height: 100px;
  background: #D6A3E6;
}
    <header></header>

<div class="middle">
  <aside class="left-sidebar">
    <div class="left-sidebar__blocks-holder">
      <div class="blocks">
        Блоки, должны быть всегда на виду
      </div>
    </div>

    <footer>
      Футер<br>всегда внизу
    </footer>
  </aside>

  <main class="content">
    Контент, должен быть прижат к низу
  </main>
</div>

    • 1

相关问题