0

В моем интерфейсе имеется два блока, у них задано минимальные размеры, максимальные размеры и действующий размер, всё указано в vw и vh. При растягивании окна справа от 2 блока появляется пропуск, а при сжимании блок уменьшается, но когда мы уменьшаем окно до определённых размеров 2 блок смещается под 1 (минимальные размеры 2 блока явно не были достигнуты). Ниже прикрепляю код в html и css свойства блоков. html:

<!DOCTYPE html>
<html>
<head>
    <title>UNBEBinder</title>

    <script src="/eel.js"></script>
    <link rel="icon" type="image/png" href="/unbe.png">

    <link rel="stylesheet" href="main.css">
</head>
<body>

    <script type="text/javascript">
        function createButtonsInScroll(quantityBtns, whereToInsertNode) {
          for (let i = 0; i <= quantityBtns; i++) {
            const buttonNode = document.createElement('button');
            buttonNode.id = `selectbutton${i}`;
            buttonNode.textContent = `Отыгровка ${i}`;
            whereToInsertNode.append(buttonNode);
            const brNode = document.createElement('br');
            whereToInsertNode.append(brNode);
          }
        }
    </script>

    <div id="buttonsInScroll">
        
        <script type="text/javascript">
            createButtonsInScroll(30, buttonsInScroll);
        </script>
        
    </div>

    <div class="editorMain">
        <button id="buttonCopy">Копировать</button>
    </div>

    <div class="mainBlock"></div>

</body>
</html>

css:

@import url(http://fonts.cdnfonts.com/css/lemon-milk)

* {
    font-family: "LEMON MILK", sans-serif;                                  
}

#buttonsInScroll {
    overflow-y: auto; 
    width: 118px;
    min-height: 154px;
    max-height: 97.5vh;
    float: left;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #3d3837;
    border-radius: 5em;
}

::-webkit-scrollbar-thumb {
    background-color: #201e1e;
    border-radius: 5em;
    padding: 10px;
}

::-webkit-scrollbar-thumb:hover {
    padding: 0px;
}

html, body {
    overflow-y: hidden; 
    background: #262626;
    color: white;
    scrollbar-color: #201e1e #3d3837;
    scrollbar-width: 10px;
}

#selectbutton0 {
    border: none;
    width: 10.3%;
    height: 3.9%;
    min-width: 100px;
    min-height: 30px;
    background-color: #fd6a12;
    border-radius: 7px;
    color: white;
    cursor: pointer;
}

#selectbutton1, #selectbutton2, #selectbutton3, #selectbutton4, #selectbutton5, #selectbutton6, #selectbutton7, #selectbutton8, #selectbutton9, #selectbutton10, #selectbutton11, #selectbutton12, #selectbutton13, #selectbutton14, #selectbutton15, #selectbutton16, #selectbutton17, #selectbutton18, #selectbutton19, #selectbutton20, #selectbutton21, #selectbutton22, #selectbutton23, #selectbutton24, #selectbutton25, #selectbutton26, #selectbutton27, #selectbutton28, #selectbutton29, #selectbutton30 {
    border: none;
    margin-top: 7px;
    min-width: 100px;
    min-height: 30px;
    background-color: #fd6a12;
    border-radius: 7px;
    color: white;
    cursor: pointer;
}

.editorMain {
    background-color: #3d373a;
    margin-left: 17px;
    width: 87vw;
    height: 97.5vh;
    max-width: 87vw;
    max-height: 97.5vh;
    min-width: 535px;
    min-height: 154px;
    border-radius: 25px;
    float: left;
}

#buttonCopy {
    border: none;
    margin-top: 7px;
    margin-left: 19px;
    min-width: 100px;
    min-height: 41px;
    background-color: #262626;
    border-radius: 20px;
    color: #fd6a12;
    cursor: pointer;
}

.mainBlock {
    clear: float;
}

Есть ли возможность как-то решить проблему со смещением блоков и возможно ли как-то убрать пропуск правее 2 блока при растяжении окна. Заранее спасибо!

1 ответ 1

1

Если возможно предложу использовать flex, а про flout забыть. Тогда все очень просто получается

Блоки buttonsInScroll и editorMain обернуть в общий див (например) wrapper и добавить свойство display: flex;

А потом с помощью медиа запроса адаптировать

@import url(http://fonts.cdnfonts.com/css/lemon-milk)

* {
    font-family: "LEMON MILK", sans-serif;                                  
}

#buttonsInScroll {
    overflow-y: auto; 
    width: 118px;
    min-height: 154px;
    max-height: 97.5vh;
    /*float: left;*/
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #3d3837;
    border-radius: 5em;
}

::-webkit-scrollbar-thumb {
    background-color: #201e1e;
    border-radius: 5em;
    padding: 10px;
}

::-webkit-scrollbar-thumb:hover {
    padding: 0px;
}

html, body {
    overflow-y: hidden; 
    background: #262626;
    color: white;
    scrollbar-color: #201e1e #3d3837;
    scrollbar-width: 10px;
}

#selectbutton0 {
    border: none;
    width: 10.3%;
    height: 3.9%;
    min-width: 100px;
    min-height: 30px;
    background-color: #fd6a12;
    border-radius: 7px;
    color: white;
    cursor: pointer;
}

#selectbutton1, #selectbutton2, #selectbutton3, #selectbutton4, #selectbutton5, #selectbutton6, #selectbutton7, #selectbutton8, #selectbutton9, #selectbutton10, #selectbutton11, #selectbutton12, #selectbutton13, #selectbutton14, #selectbutton15, #selectbutton16, #selectbutton17, #selectbutton18, #selectbutton19, #selectbutton20, #selectbutton21, #selectbutton22, #selectbutton23, #selectbutton24, #selectbutton25, #selectbutton26, #selectbutton27, #selectbutton28, #selectbutton29, #selectbutton30 {
    border: none;
    margin-top: 7px;
    min-width: 100px;
    min-height: 30px;
    background-color: #fd6a12;
    border-radius: 7px;
    color: white;
    cursor: pointer;
}

.editorMain {
    background-color: #3d373a;
    margin-left: 17px;
    width: 87vw;
    height: 97.5vh;
    max-width: 87vw;
    max-height: 97.5vh;
    min-width: 535px;
    min-height: 154px;
    border-radius: 25px;
    /*float: left;*/
}

#buttonCopy {
    border: none;
    margin-top: 7px;
    margin-left: 19px;
    min-width: 100px;
    min-height: 41px;
    background-color: #262626;
    border-radius: 20px;
    color: #fd6a12;
    cursor: pointer;
}

.wrapper {
    display: flex;
} 
<body>

    <script type="text/javascript">
        function createButtonsInScroll(quantityBtns, whereToInsertNode) {
          for (let i = 0; i <= quantityBtns; i++) {
            const buttonNode = document.createElement('button');
            buttonNode.id = `selectbutton${i}`;
            buttonNode.textContent = `Отыгровка ${i}`;
            whereToInsertNode.append(buttonNode);
            const brNode = document.createElement('br');
            whereToInsertNode.append(brNode);
          }
        }
    </script>
    <div class="wrapper">
        <div id="buttonsInScroll">
        
        <script type="text/javascript">
            createButtonsInScroll(30, buttonsInScroll);
        </script>
            
        </div>

        <div class="editorMain">
            <button id="buttonCopy">Копировать</button>
        </div>
    </div>
    


</body>

2
  • Да, работает, а есть идеи как исправить пропуск справа от 2 блока при растягивании окна на весь экран?
    – YAKMUVE
    21 мая 2022 в 12:12
  • 1
    Можно так например .editorMain { background-color: #3d373a; margin: 0px 10px; width: 100%; border-radius: 25px; } 21 мая 2022 в 12:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.