Question

我正在尝试将右侧300px（大约是我的屏幕上的一半。我的网站将使用不同的固定宽度）并且左侧是宽度的剩余部分。正如你所看到的那样，leftside isnt并且textarea不可读。

右侧必须在右侧，而不是在右侧。此外，我可能会使两侧的最小高度为客户端屏幕的高度（如果可能与css一起）。

我搞砸了一个小时没有成功。我该怎么做？

Answer 1

选项1：CSS

在不使用JS的情况下执行此操作的一种方法是使用包含内容的整个宽度的包装器，并在其内部浮动一个块到300px的右侧{或您需要的任何宽度}

var width = window.innerWidth - 300;
document.getElementById('leftside').style.width = width + 'px';

另外，添加清除浮动div

<div class="Display clrfx">
    <div class="leftside">
    <textarea cols=""></textarea>
    </div>
    <div class="rightside">the text</div>
</div>

.clrfx:after {
display:block;
clear:both;
content:"";
}

Answer 2

修正：

.rightside{ background: gray; width:300px; position: absolute; top: 0px; right: 0px; }

.leftside{position: absolute; right: 0px; padding-right: 300px;}

.leftside textarea{ width: 100%; }

.Display{width: 100%;}

编辑看起来这实际上不适用于最大宽度分配。

如何使右侧300px和左侧尽可能大？ CSS

2 个答案: