Question

我正在尝试重新制作像叠页一样的页面。这是：

<!DOCTYPE html>

<html>

    <head>
        <title>PageDown Demo Page</title>

        <link rel="stylesheet" type="text/css" href="demo.css" />

    </head>

 <body>
        <div class="wmd-panel">
            <div id="wmd-button-bar"></div>
            <textarea class="wmd-input" id="wmd-input">
This is the *first* editor.
------------------------------

Just plain **Markdown**, except that the input is sanitized:

<marquee>I'm the ghost from the past!</marquee>

and that it implements "fenced blockquotes" via a plugin:

"""
Do it like this:

1. Have idea.
2. ???
3. Profit!
"""
</textarea>
        </div>
        <div id="wmd-preview" class="wmd-panel wmd-preview"></div>

        <br /> <br />


    </body>
</html>

我的css：

body {
    margin: 0 0;
    min-height: 100%;
    overflow-y: scroll
.wmd-panel {
    margin: auto;
    float: left;
    width: 49%;
    height: 100% !important;
}
.wmd-button-bar {
    width: 100%;
}
.wmd-input {
    width: 100%;
    height: 100%;
    font-family: Menlo, Consolas, 'Courier New', Courier, monospace;
    float: left;
    display: block;
}
.wmd-preview {
    font-family: Menlo, Consolas, 'Courier New', Courier, monospace;
    float: right;
    height: 90%;
    width: 49%;
    overflow: auto;
    display: block;
}
.wmd-button-row {
    padding: 0 0 0 0 !important;
    width: 49%;
}
...

JSFiddle here

因此，我无法使用css使textrea更大，并且手动启用了这个开发工具：

enter image description here

Answer 1

您是否尝试以百分比高度拉伸文字区域？

将height: 100%;应用于html,body。

In a fiddle.

CSS

html, body {
    margin: 0;
    height: 100%;
}

身体粘在底部所以不能放大textarea

1 个答案: