Contenteditable Div 展开而不是添加滚动条

问题描述 投票：0回答：1

我有一个带有 ID 编辑器的 contenteditable div。我遇到一个问题，当我添加内容时，编辑器的高度不断扩大。我将溢出-y 设置为自动，但不是添加滚动条，而是 

#editor
的高度扩展。

此外，如果我从网络或 MS Word 粘贴文章，编辑器会同时扩展宽度和高度，并且不遵循设置的宽度和高度。

如果我给它一个固定的宽度和高度（以像素为单位），它就可以工作，但我希望它具有响应能力。有人可以指出可能是什么问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<div id="main-container">
    <div id="sidebar"></div>
    <div id="list-container"></div>
    <div id="content">
        <div id="content-header">
            <button id="toggle-button">☰</button>
        </div>
        <div id="content-block">
            <div id="note-tools"></div>
            <div id="inner-content">
                <form id="formNotes">
                    <input id="noteTitle">
                    <div id="editor" contenteditable="true"></div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>

CSS

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

#main-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #f4f4f4;
}

#sidebar {
    width: 250px;
    height: 100%;
    background-color: #333;
    color: #fff;
    padding: 15px;
}

#list-container {
    width: 400px;
    height: 100%;
    background-color: #555;
    color: #fff;
    padding: 15px;
}

#content {
    flex-grow: 1;
    height: 100%;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
}

#content-header {
    width: 100%;
    height: 60px;
    background-color: #0073e6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

#toggle-button {
    display: none;
    background-color: #005bb5;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

#content-block {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

#note-tools {
    height: 60px;
    width: 100%;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#inner-content {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#formNotes {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#noteTitle {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#editor {
    flex-grow: 1;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow-y: auto;
    word-break: break-all;
}

@media (max-width: 768px) {
    #sidebar, #list-container {
        display: none;
    }

    #toggle-button {
        display: block;
    }

    #sidebar.active {
        display: block;
        position: absolute;
        width: 250px;
        height: 100%;
        background-color: #333;
        color: #fff;
        z-index: 1000;
    }

    #content {
        margin-left: 0;
        transition: margin-left 0.3s;
    }

    #sidebar.active + #content {
        margin-left: 250px;
    }
}

代码笔链接

https://codepen.io/Oshi-Wijesinghe/pen/KKjvxLj

正如您在代码笔中看到的，如果只是继续在编辑器 div 上输入，它不会添加滚动条，而是继续扩展 div，

css flexbox responsive-design overflow contenteditable
1个回答
0
投票

您有一个非常小的问题，您需要为

#editor
分配任何固定高度。在下面的示例中，我添加了 
height: 50vh
。

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

#main-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #f4f4f4;
}

#sidebar {
    width: 250px;
    height: 100%;
    background-color: #333;
    color: #fff;
    padding: 15px;
}

#list-container {
    width: 400px;
    height: 100%;
    background-color: #555;
    color: #fff;
    padding: 15px;
}

#content {
    flex-grow: 1;
    height: 100%;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
}

#content-header {
    width: 100%;
    height: 60px;
    background-color: #0073e6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

#toggle-button {
    display: none;
    background-color: #005bb5;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

#content-block {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

#note-tools {
    height: 60px;
    width: 100%;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#inner-content {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#formNotes {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#noteTitle {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#editor {
  height: 50vh;
    flex-grow: 1;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow-y: auto;
    word-break: break-all;
}

@media (max-width: 768px) {
    #sidebar, #list-container {
        display: none;
    }

    #toggle-button {
        display: block;
    }

    #sidebar.active {
        display: block;
        position: absolute;
        width: 250px;
        height: 100%;
        background-color: #333;
        color: #fff;
        z-index: 1000;
    }

    #content {
        margin-left: 0;
        transition: margin-left 0.3s;
    }

    #sidebar.active + #content {
        margin-left: 250px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<div id="main-container">
    <div id="sidebar"></div>
    <div id="list-container"></div>
    <div id="content">
        <div id="content-header">
            <button id="toggle-button">☰</button>
        </div>
        <div id="content-block">
            <div id="note-tools"></div>
            <div id="inner-content">
                <form id="formNotes">
                    <input id="noteTitle">
                    <div id="editor" contenteditable="true">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae perspiciatis laudantium alias asperiores dolor. Voluptas debitis labore odit asperiores. Incidunt dolores dolor labore adipisci, corrupti dolorem iusto! Maiores perferendis ex quibusdam mollitia quo. Nemo, minus inventore mollitia explicabo facilis, id nisi quidem earum sunt veniam assumenda enim ea exercitationem non pariatur quia reprehenderit iste consequatur molestias corporis accusantium sint deleniti veritatis tempora. Ipsam, corrupti nostrum! Nesciunt, doloribus aliquid! Odio autem officia omnis tempora quibusdam quia ut perspiciatis temporibus quo, nisi, in, facilis minima excepturi magni minus deleniti dignissimos adipisci possimus beatae. Vero dignissimos suscipit assumenda distinctio! Quasi sapiente eius omnis.
                      
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni similique sed, impedit eos amet aspernatur quisquam eveniet illo sapiente ducimus porro doloribus odio consequuntur, excepturi asperiores error cumque, molestias quidem ullam. Reiciendis porro ipsa quo deleniti nostrum consequuntur omnis architecto nam quae ipsam inventore quas sequi harum, doloremque quis delectus hic. Quae in alias debitis necessitatibus maiores quasi sint dolore, quis quibusdam nostrum eum sequi, neque repudiandae. Unde quibusdam magnam reiciendis vero culpa ducimus eligendi quos, assumenda accusamus sunt, deleniti possimus minus eos repellat porro maxime autem illum a, nihil velit sit non eaque officia dicta. Possimus distinctio sequi tenetur at necessitatibus, velit fuga, natus impedit voluptas ipsam minima perspiciatis ea corporis amet rerum voluptatem reiciendis dolorum placeat praesentium. Impedit a excepturi dolor tenetur recusandae perferendis ipsam expedita, inventore delectus saepe suscipit adipisci, explicabo enim iure quos autem at minima similique quaerat veniam cumque officiis maxime. Modi iusto adipisci facere maiores impedit magnam distinctio molestias ipsa. Harum iusto quae, cumque corrupti numquam nobis, dolorem nulla ut debitis reiciendis quia officiis in! Aspernatur sequi dicta quisquam? Nemo, nulla quisquam! Laboriosam sequi odit, officia officiis ut explicabo incidunt aliquam voluptatum perferendis qui. Temporibus accusantium mollitia aperiam quia ex vitae, cupiditate soluta unde?
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.