Блок div не растягивается на оставшуюся ширину страницы

Question

Я имею следующую разметку:
сама страница:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <title>Editor State</title>
        <link rel="stylesheet" href="http://127.0.0.1:8000/static/main.css" />
        <script type="text/javascript" src="http://127.0.0.1:8000/static/main.js"></script>
    </head>
    <body>
        <div class="header">

            <p></p>
            <div id="links234">
....

        </div>
        <img src="http://127.0.0.1:8000/static/plus.jpeg" style="

        width:30px;
        height:30px;
        position: fixed;
        left: 1px;
        top: 70vh;


        " onclick='
'>


        <div contentEditable="true" id="editor"></div>
    </body>
</html>

main.css:

   #text-style {
       text-align: left;
       margin: 10px;
       overflow: auto;
       font-family: monospace;
   }
   
   * {
       margin: 0;
       padding: 0;
       text-decoration: none;
   }
   
   .header {
       background: #42aaff;
       border-bottom: 1px solid gray;
       height: 80px;
   }
   
   .header p {
       color: white;
       font-size: 45px;
       padding: 5px;
   }
   
   .header a {
       color: white;
       text-align: right;
   }
   
   #sidebar {
       margin-right: 10px;
       margin-top: 50px;
       background-color: #e8e8e8;
       color: black;
       float: right;
       height: 280px;
       width: 280px;
   }
   
   #main {
       min-height: 1000px;
       margin-bottom: 10px;
       background-color: #e8e8e8;
       margin-right: 10px;
       margin-left: 10px;
       margin-top: 10px;
       width: 70%;
       height: 100%;
   }
   
   @media only screen and (max-width: 1000px) {
       #sidebar {
           display: none;
       }
       #links234 {
           display: none;
       }
   }
   
   .in {
       resize: none;
       width: 250px;
       height: 300px;
   }
   
   #editor {
       height: 100vh;
       display: flex;
       flex-direction: column;
   }

Я хотел бы растянуть блок div с id editor на оставшуюся ширину страницы, я попробавал через height:100% и height:100hv, однако блок все равно остаётся заданного размера.Подскажите, как растянуть блок "editor" по высоте.

БЛОГ НА HUSL

Блок div не растягивается на оставшуюся ширину страницы

Ответы (0 шт):