我希望使用页面的完整高度使用左列(#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;
此处结果错误:右栏中的文字不可见。
如何让右栏显示在右侧,而不是在左栏下方?
此外:
将鼠标悬停在右列和左列之间的限制处应显示调整大小的光标:当我们水平调整左列的大小(从浏览器宽度的0%到100%)时,右列应该在实际中适应时间
我通过在框中创建右列来尝试解决方案,但是当我使左列0%宽度/右列100%宽度时,然后从浏览器打印时,浏览器只能看到一个页面(并尝试只打印一个页面,并尝试打印y滚动条,有趣!),而不是像往常一样将内容打印到多个页面。
答案 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>