Блог

Главная - Вопросы по программированию - Кнопки и текст не останутся в контейнере

Кнопки и текст не останутся в контейнере

#javascript #html #css

Вопрос:

У меня есть контейнер с некоторым текстом и кнопками, которые реагируют на размер экрана, но они выходят за пределы контейнера, когда недостаточно места. Кто-то помог мне исправить это, добавив параметр clamp к размеру шрифта, но после того, как я внес несколько изменений в другие части своего кода, теперь проблема вернулась.

Может ли кто-нибудь помочь мне понять, что мне нужно сделать, чтобы кнопки и текст оставались в контейнере? Я думал, что мне нужно отрегулировать минимальные значения параметра зажима, но это, похоже, ничего не меняет. Похоже, что текст и кнопки даже не распознают родительский контейнер, они просто делают то, что хотят.

У меня контейнер btn-сетки установлен на 20% высоты chat_bubble, и мне нужно, чтобы текст оставался в пределах оставшихся 80% контейнера.

Кроме того, я получаю предупреждение от WebStorm о том, что несколько моих объявлений размера шрифта перезаписывают друг друга, но я не могу понять, какое из них должно быть приоритетным, чтобы избежать избыточности.

Также я пытаюсь добавить 5-кратное или процентное отступ/отступ в верхней и правой частях основного контейнера, но я замечаю, что при этом появляется полоса прокрутки, даже если я делаю переполнение: скрыто. Кто-то сказал мне, что это из-за коллапса полей, но я не могу понять, как предотвратить это, потому что я не вижу, как вложенные контейнеры занимают так много места.

Это кодовый код: https://codepen.io/TheNomadicAspie/pen/JjWVbKJ

И это мой код:

 *, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Benne', serif;
    font-size: 1.5rem;
    font-size: clamp(1rem, 1.5rem, 2rem);
    color: black;
    line-height: 1.25;
}

:root {
    --hue-neutral: 200;
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: black;
}

#question {
    font-size: 1.5rem; /* fallback */
    font-size: clamp(1rem, 1.5rem, 2rem);
}

.container {
    width: 90%;
    height: 90%;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
    margin: 20px 0;
    height: 20%;
}

.btn {
    background-color: purple;
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.5rem;
    font-size: clamp(1rem, 1.5rem, 2rem);
}

.btn:hover {
    border-color: black;
}

.start-btn, .next-btn {
    font-size: 1.5rem;
    font-size: clamp(1rem, 1.5rem, 2rem);
    font-weight: bold;
    padding: 10px 20px;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hide {
    display: none;
}

#main {
    display: flex; /* Use flexbox */
    flex-direction: row; /* Flex horizontally */
    align-items: flex-end;
    padding-left: 5vw;
    overflow: hidden;
}

#chat_bubble {
    width: 70vw; /* Make chat bubble 70% of viewport width */
    height: 70vh; /* Make chat bubble 70% of viewport height */
    background: ghostwhite !important;
}

#character_image  {
    float: none; /* undo float */
    flex-shrink: 1; /* let character image shrink */
    height: 70vh; /* Make character_image 70% of viewport height */
}

#character_image img {
    height: 100%;
}

#char_1 {
    display: inline-block;
}
#char_2 {
    display: none;
}
@media(max-width:700px) {
    #main {
        flex-direction: column;
    }
    #chat_bubble {
        width: 90vw;
    }
    #character_image {
        height: 30vh;
    }
    #char_1 {
        display: none;
    }
    #char_2 {
        display: inline-block;
    }
}

Ответ №1:

Если вы удалите явное height: 70vh объявление #chat_bubble и вместо этого будете использовать min-height: 70vh для обеспечения того, чтобы высота составляла не менее 70% высоты окна просмотра, содержимое не будет переполняться. Теперь текст и кнопки никогда не будут переполнять родительский контейнер, так как для родителя не задана явная высота #chat_bubble . Причина переполнения кнопок перед этим изменением заключается в том, что установлена явная ширина #chat_bubble 70 вч, и любое вложенное содержимое, достаточно длинное, чтобы выйти за пределы родительского контейнера, сделает это. Я добавил верхнюю/нижнюю поля 5vw и автоматические левые/правые поля, вы можете настроить их по своему усмотрению.

После прочтения ваших комментариев ниже, clamp() использование является частью проблемы, поскольку текст занимает так много места на экране и заставляет #chat_bubble его занимать большую высоту. Синтаксис таков clamp(min, flex unit, max) , и вы используете 1.5rem для 2-го аргумента, вместо этого используйте блок просмотра, подобный 3vw или что-либо еще, в vw качестве среднего аргумента, который является, так сказать, «масштабом» или «гибким модулем».

 const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')

startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')

questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'

const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes) 
 *, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Benne', serif;
    font-size: 1.5rem;
    font-size: clamp(1rem, 1.5rem, 2rem);
    color: black;
    line-height: 1.25;
}

:root {
    --hue-neutral: 200;
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    width: 100vw;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: black;
}

#question {
    font-size: 1.5rem; /* fallback */
    font-size: clamp(1rem, 3vw, 2rem);
}

.container {
    width: 90%;
    height: auto;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
    margin: 20px 0;
    height: 20%;
}

.btn {
    background-color: purple;
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.5rem;
    font-size: clamp(1rem, 3vw, 2rem);
}

.btn:hover {
    border-color: black;
}

.start-btn, .next-btn {
    font-size: 1.5rem;
    font-size: clamp(1rem, 1.5rem, 2rem);
    font-weight: bold;
    padding: 10px 20px;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hide {
    display: none;
}

#main {
    display: flex; /* Use flexbox */
    flex-direction: row; /* Flex horizontally (this is default flex-direction)*/
    align-items: flex-end;
    margin: 5vw auto;
    overflow: hidden;
}

#chat_bubble {
    width: 70vw; /* Make chat bubble 70% of viewport width */
    min-height: 70vh; /* Make chat bubble 70% of viewport height at minimum*/
    background: ghostwhite !important;
}

#character_image  {
    float: none; /* undo float */
    flex-shrink: 1; /* let character image shrink */
    height: 70vh; /* Make character_image 70% of viewport height */
}

#character_image img {
    height: 100%;
}

#char_1 {
    display: inline-block;
}
#char_2 {
    display: none;
}
@media(max-width:700px) {
    #main {
        flex-direction: column;
    }
    #chat_bubble {
        width: 90vw;
    }
    #character_image {
        height: 30vh;
    }
    #char_1 {
        display: none;
    }
    #char_2 {
        display: inline-block;
    }
} 
 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test title</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Benneamp;family=Fjalla Oneamp;display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
    <div id="chat_bubble" class="container">
        <div id="email-container" class="hide">
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email">
            <button id="submit-email-btn" class="btn">Submit</button>
        </div>
        <div id="question-container" class="hide">
            <div id="question" class="question-text">Question</div>
            <div id="answer-buttons" class="btn-grid">
            </div>
        </div>
        <div id="chart" class="hide"></div>
        <div class="controls">
            <button id="start-btn" class="start-btn btn">Start</button>
        </div>
    </div>
    <div id="character_image">
      <img id="char_1" src="https://i.imgur.com/7eYWqqo.png" alt=""></img>
  <img id="char_2" src="https://i.imgur.com/ixM8TtU.png" alt=""></img>
    </div>

</div>


<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>

Комментарии:

1. @TheNomadicAspie Помогает ли это ответить на ваш вопрос?

2. Спасибо, но есть ли какой-нибудь способ разместить текст и кнопки в родительском контейнере, не увеличивая пузырь чата? Я намеренно хотел, чтобы chat_bubble был точно такого размера, как сейчас по отношению к экрану, и я несколько дней пытался правильно определить размеры контейнеров. Теперь осталось только, чтобы текст и кнопки динамически помещались в этот контейнер. Увеличение размера контейнера не является моим предпочтительным вариантом, если в любом случае этого можно избежать.

3. Ах, да, я понимаю. Таким образом, вы хотите #main , чтобы контейнер занимал 100% высоты окна просмотра и не имел вертикальной прокрутки. Просто заставьте #chat_bubble изображение занимать свою часть экрана вместе с изображением без какой-либо вертикальной прокрутки. Спасибо за объяснение, в этом больше смысла. Я обновлю свой ответ.

4. Да, это сложно объяснить, потому что правила различаются в зависимости от размера экрана. Но в принципе, если экран имеет ширину более 700 пикселей, пузырь чата может увеличиваться или уменьшаться, потому что на компьютерных мониторах достаточно места для объема текста. Но для мобильных или небольших устройств я хочу, чтобы изображение персонажа занимало 30% вертикальной высоты, а пузырь чата занимал оставшееся вертикальное и горизонтальное пространство (за исключением поля слева, вверху и справа, где у меня возникают проблемы с полосой прокрутки).

5. @TheNomadicAspie Добро пожаловать, я рад помочь. Я обновил свой ответ, если вы хотите взглянуть. Дайте мне знать, если это ближе к тому, что вам нужно 🙂

Метки: