两列,第二列自动调整其宽度

时间:2017-09-25 16:37:27

标签: html css position

我希望使用页面的完整高度使用左列(#a),使用页面的其余部分使用右列(#b):



* { margin: 0; padding: 0; }
#a { position: fixed; height: 100%; }
#b { background-color: blue; }

<textarea id="a">hello</textarea>
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>
&#13;
&#13;
&#13;

此处结果错误:右栏中的文字不可见。

如何让右栏显示在右侧,而不是在左栏下方?

此外:

  • 将鼠标悬停在右列和左列之间的限制处应显示调整大小的光标:当我们水平调整左列的大小(从浏览器宽度的0%到100%)时,右列应该在实际中适应时间

  • 我通过在框中创建右列来尝试解决方案,但是当我使左列0%宽度/右列100%宽度时,然后从浏览器打印时,浏览器只能看到一个页面(并尝试只打印一个页面,并尝试打印y滚动条,有趣!),而不是像往常一样将内容打印到多个页面。

2 个答案:

答案 0 :(得分:0)

这是一个仅支持CSS的解决方案,它依赖于flex显示属性。这提供了您列出的几乎所有功能,并假设两列都可以使用整页高度。除了右下角可用的textareas上的本机控件之外,CSS中没有办法只拖动元素的一边来调整大小。

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
}

.parent {
	display: flex;
	width: 100%;
	height: 100%;
}

.left {
	resize: horizontal;
	background: lightblue;
}

.right {
	flex: 1;
	background: coral;
}
<div class="parent">
	<textarea class="left"></textarea>
	<div class="right">asdf</div>
</div>

答案 1 :(得分:0)

您的元素#a具有position: fixed;这意味着它覆盖了位于左上角的另一个元素,因为固定定位的元素是从文档流布局中取出的。

为避免这种情况(如果您坚持固定位置),请按以下方式进行设置:

P.S。:一次一个问题......

* {
  margin: 0;
  padding: 0;
}

#a {
  position: fixed;
  height: 100%;
  width: 35%;
}

#b {
  position: relative;
  width: 65%;
  left: 35%;
  background-color: blue;
}
<textarea id="a">hello</textarea>
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>