0
Я создаю веб-сайт, который действует как кадр на другую страницу HTML. Макет, который я хочу, представляет собой раздел для названия сайта и под основной частью, который имеет объект, вложенный внутри раздела (должно быть больше одного, когда отображается только один, поэтому эта структура важна). По какой-то причине в Firefox я вижу это так, как я хотел, но в Chrome «объект» просто не будет распространяться на 100% высоты.Макет сайта в строках
Кодекс:
body {
\t margin-left: 0%;
\t margin-right: 0%;
\t height: 100vh;
\t margin-top: 0%;
\t margin: 0 auto;
\t display: flex;
\t flex-direction: column;
\t z-index: 0;
}
.site-title {
\t height: 50px;
}
.main-menu {
\t position: fixed;
\t display: inline-block;
}
.main {
\t height: auto;
\t flex-grow: 1;
\t display: flex;
\t flex-direction: column;
}
section {
\t border: 5px solid pink;
\t color: #FFFFFF;
\t overflow: hidden;
\t flex-grow: 1;
\t height: auto;
}
object {
\t border: 5px solid #FFFFFF; \t
\t width: 100%;
\t height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <link rel="stylesheet" type="text/css" href="css/theme.css">
</head>
<body>
\t <div class="site-title"> \t
\t \t <h1>Strawberry</h1>
\t </div>
\t
\t <div class="main" id="main">
\t \t <section class="instance">
\t \t <object data="home.html"></object>
\t \t </section>
\t </div>
</body>
</html>
Я в Chrome. Он работает по своему желанию. Попробуйте добавить 'min-height: 100%' в ваш '.object' –
Этот сниппс мне кажется пустым. Кстати, если вы хотите, чтобы что-то имело высоту 100%, вам понадобится все выше, чтобы иметь его, начиная с html, body и т. Д. –