Question

我希望有两个巨大的文本区域包含整个屏幕。我尝试调整行数和列数，这不起作用我也希望它能响应屏幕。我愿意使用bootstrap，但我也希望尽可能简单。

这是t he project和相关代码：

    Enter two text blocks to compare:
    <form action="/" method="post">
        <textarea name="A"></textarea>
        <textarea name="B"> </textarea>
        <input type="submit" value="Execute" />
    </form>

以下是整个文件。

<!DOCTYPE html>
<html>
<head>
    <title>Ven Diagram</title>
<style type=”text/css”>
form{
    width: 100%;
    position: relative;
}

textarea:first-child{
    width: 50%;
    float:left;
}

textarea:nth-child(2){
    width: 50%;
    float:right;
}
</style>
</head>
<body>
    This program allows you to match text.

    Enter two text blocks to compare:
    <form action="/" method="post">
        <textarea name="A"></textarea>
        <textarea name="B"> </textarea>
        <input type="submit" value="Execute" />
    </form>

    {% with messages = get_flashed_messages() %}
        {% if messages %}
            Results:
            <pre>
                {% for message in messages %}
{{ message }}
                {% endfor %}
            </pre>
        {% endif %}
    {% endwith %}
</body>

〜

Answer 1

bootstrap提供的行/列不会覆盖整个宽度。试试这个

form{
    width: 100%;
    position: relative;
}

textarea:first-child{
    width: 50%;
    float:left;
}

textarea:nth-child(2){
    width: 50%;
    float:right;
}

Answer 2

无论你提供什么，我认为这就是你想要的东西。

只需转到链接并resize浏览器即可。

它适用于所有尺寸的屏幕。点击屏幕左下角的Edit this pen即可查看代码。

http://codepen.io/neonirav/full/dbtmk

问候。

创建包含整个屏幕的两个大文本区域

2 个答案: