Question

方案

我正在使用包含三个主要元素的页面布局。

x1 中央列

position:relative;
padding-right:300px;

右侧的x2 侧边栏

1-sidebartop

position:absolute;
top:0;
right:0;
height:250px;
width:300px;

2- sidebarbottom

position:absolute;
top:250px;
right:0;
width:300px;

HTML结构

<div class="sidebartop"></div>
<div class="main"></div>
<div class="sidebarbottom"></div>

为什么我这样做？

因为我希望侧边栏是固定宽度的，让中心列占据水平可用空间的其余部分。

但是......为什么我将相同的侧边栏分成两部分，而不是浮动或内联块对齐两列？

因为我希望侧边栏的上侧留在移动设备上的主要内容之前，我只对所有元素position:relative;进行操作，因此它们会流入所需的移动结构。

那么问题是什么？

侧边栏结构使得将页脚保持在底部非常复杂。现在我正在使用javascript方法重新定位页脚。我正在考虑用纯粹的CSS实现这一目标的聪明方法。

您可以看到JSFiddle here。

非常感谢您抽出宝贵时间。

Answer 1

你可以（而且几乎肯定应该）在没有绝对定位的情况下这样做。

这是一种基于浮动的方法，可以保留您的文档顺序，并且不依赖于任何元素的定位或固定高度：

＆＃13;

body, html {
  margin: 0; padding: 0;
}
* {
  box-sizing: border-box;
}
.topside,
.bottomside {
  width: 250px;
  float: right;
  clear: right;
  background-color: #FFC;
}
.main {
  width: calc(100vw - 250px); /* <-- This is the interesting bit */
  float: left;
  background-color: #FCF
}
.footer {
  clear: both;
  background-color: #CFF
}

＆＃13;

<div class="topside">
  Sidebar Piece 1 [Stays before main on narrow screens]
</div>
<div class="main">
  MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS
  MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS

</div>
<div class="bottomside">
  Sidebar Piece 2
</div>
<div class="footer">
  Keep footer at bottom
</div>
</div>

＆＃13;

（您可以类似地使用calc和vh来使您的侧边栏高度与主要内容区域的高度相匹配，但我相信这需要在至少页脚和半部分上设置固定高度侧边栏，以及标题（如果有的话）。）

我还没有详细解决过的另一种可能性：您可以通过更改文档顺序将两侧的侧边栏放在一起（这会使您的桌面布局更易于管理）来实现相同的效果并在移动布局中使用flex-direction来更改主要和sidebartop块的明显顺序。

Answer 2

我认为你需要这样的。请你检查以下代码...

答案。enter code here

＆＃13;

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	background:#ededed;
	padding:10px;
}
#content {
	padding-bottom:100px; /* Height of the footer element */
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
}

＆＃13;

	<div id="wrapper">
		
		<div id="header">
		</div><!-- #header -->
		
		<div id="content">
		</div><!-- #content -->
		
		<div id="footer">
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->

＆＃13;

使用绝对定位的主要元素时，请将页脚保持在底部

2 个答案: