Высота фактически не меняется во время плавания
Прямо сейчас я кодирую меню с двумя столбцами. Это код.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>replit</title>
<link href = "style.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div class = "stockapps">
<img src = "icons/eShop.svg">
<img src = "icons/sverse.svg">
</div>
<div class = "main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
Проблема заключается в том, что тег div stockapps не заполняет весь экран высотой, а вместо этого предпочитает заполнять только область, занимаемую дочерними объектами.
Я попытался использовать исправление и установить скрытое переполнение, но, похоже, проблема не устранена. Вероятно, это какая-то ошибка новичка, так как CSS не моя сильная сторона.
Этот рабочий пример демонстрирует проблему.
Упс! Моя ошибка, указанная там рабочий пример неверна. Это исправлено сейчас.
хорошо, значит, ширина вашего .stockapps{: 5%; } на самом деле это не поместится на весь экран. что вы пытаетесь сделать с изображениями?? вы хотите, чтобы он поместился на весь div ?? иллюстрация того, что вы хотите, поможет вам или просто объяснит лучше.
В приведенном коде вы, похоже, пытаетесь поместить псевдоэлемент after для каждого из дочерних элементов стандартных приложений. Это может не работать, так как это изображения, но не могли бы вы описать, что вы хотите, чтобы они делали?
Ответы 2
Если я вас правильно понял, вам нужно создать двухколоночный макет для вашего меню.
Чтобы добиться этого макета, я бы обернул <div class = "stockapps"> и <div class = "main"> в другой <div> с классом manu-wrap и добавил следующие стили CSS:
.menu-wrap {
display: flex;
justify-content: space-between;
}
Затем я удаляю свойства float, и у вас должен быть рабочий макет с двумя столбцами.
Вы можете узнать больше о display: flexздесь.
Кажется, это ничего не меняет. Этот рабочий пример демонстрирует проблему.
Вы можете обернуть стоковые приложения и основные элементы div в контейнер div.
Стиль этого контейнера, как показано ниже
Я использовал цвет фона для div stockapps, чтобы показать вам его высоту.
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}<div class = "container">
<div class = "stockapps">
<img src = "icons/eShop.svg">
<img src = "icons/sverse.svg">
</div>
<div class = "main">
<p>
Hello!
</p>
</div>
</div>Это исправило это! Тысм!
твоя рабочий пример. то, что вы пытаетесь достичь, кажется, что ваш код не соответствует здесь, чтобы возиться. в своей скрипке вы можете использовать display:flex на своем .wrapper, чтобы увидеть, чего вы пытаетесь достичь. Я просто немного запутался в том, чего вы пытаетесь достичь. Дайте мне знать точно, я мог бы быть в состоянии помочь.