CSS Элемент сетки переполняет дочерний и родительский контейнер сетки (по высоте) - PullRequest
Новая
       4

CSS Элемент сетки переполняет дочерний и родительский контейнер сетки (по высоте)

0 голосов
/ 08 мая 2020

Я использую родительский CSS контейнер сетки body [2x2] и внутри него (row 1 / col 2) дочерний контейнер сетки main [1x4]. Проблема в том, что последний элемент сетки ul контейнера main переполняет контейнеры. Вы увидите это, если прокрутите страницу вниз.

Обычно я ожидаю, что оба контейнера сетки main и body увеличатся до необходимой высоты элементов сетки ?! Но он выглядит не очень отзывчивым.

Подсказка: если я увеличиваю и уменьшаю масштаб страницы с помощью инструментов браузера, эта проблема либо становится более заметной, либо решается. 

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body, html { height: 100%;}
body {
    margin:0;
    font-family: 'Montserrat', sans-serif;
    display: grid;
    grid-template-rows: auto 50px;
    grid-template-columns: 12% auto;
    grid-template-areas:
        "sidebar right"
        "footer footer";
}
a { text-decoration: none; }
ul { list-style-type: none; float:right; }
ul li {
    display:inline;
}
ul li a { color: #fff; padding: 15px; }

#logo {
    padding: 15px;
    margin-left: 15px;
    background-color: #F3F1C7;
    color: #298383;
    text-align:center;
    font-weight: bold;
    display: inline-block;
}
header {
    background-color: #41C7C7;

    display: grid;
    grid-template-columns: [logo-start] fit-content(20%) [nav-start] auto [nav-end];
}

section#hero {
    background-color: #36ADAD;
    padding: 2em;
    border-top: 5px solid #2EA0A0;

    display: grid;
    grid-template-columns: repeat(2, auto);
}

#content h1 {
    text-transform: uppercase;
    color: #FFFBC5;
}

#content p {
    color: #fff;
}

img {
    max-width: 100%;
    background-size: cover;
    margin: 0 auto;
}

#mountain {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.sidebar {
    grid-area: sidebar;
    background: #1c9090;
    color: #ffffff;
    padding: 1em;
}

.main {
    height: auto;
    grid-area: right;
    grid-template-rows: 51px fit-content(30%) auto 50%;
    display: grid;
}

footer {
    grid-area: footer;
    background: lightgray;
}

#features {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align: center;
}

#features i {
    font-size: 2em;
}

ul#features {
    margin: 0; padding: 0;
}

ul#features li {
    background-color: lightgray;
    padding: 1em;
}

ul#features li p {
    color: #4C4C4C;
}

ul#features li:nth-child(1) {
    background-color:#E6E6E6;
}
ul#features li:nth-child(2) {
    background-color:#D3D3D3;
}
ul#features li:nth-child(3) {
    background-color:#CACACA;
}
ul#features li:nth-child(4) {
    background-color:#E6E6E6;
}
ul#features li:nth-child(5) {
    background-color:#D3D3D3;
}

section#info {
    background-color: #F2F2F2;
    padding: 2em;

    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

#mountain-vector {
    width: 200px;
    align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="sidebar">
        <p>Some information here</p>
    </div>
    <div class="main">
        <header>
            <a href="#" id="logo">ImportantCo</a>

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section id="hero">
            <div id="content">
                <h1>Sensible Solutions</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
            </div>
            <img src="images/mountain.jpg" id="mountain" alt="<mountain.jpg>">
        </section>

        <section id="info">
            <div id="content2">
                <h2>Reinvention</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
            </div>
            <img src="images/vector-mountains.svg" id="mountain-vector" alt="<vector-mountains.svg>">
        </section>

        <ul id="features">
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>My footer bar</p>
    </footer>
</body>
</html>

1 Ответ

1 голос
/ 08 мая 2020

Измените эту строку в .main class: 

grid-template-rows: 51px fit-content(30%) auto auto;

Надеюсь, это может вам помочь. 

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body, html { height: 100%;}
body {
    margin:0;
    font-family: 'Montserrat', sans-serif;
    display: grid;
    grid-template-rows: auto 50px;
    grid-template-columns: 12% auto;
    grid-template-areas:
        "sidebar right"
        "footer footer";
}
a { text-decoration: none; }
ul { list-style-type: none; float:right; }
ul li {
    display:inline;
}
ul li a { color: #fff; padding: 15px; }

#logo {
    padding: 15px;
    margin-left: 15px;
    background-color: #F3F1C7;
    color: #298383;
    text-align:center;
    font-weight: bold;
    display: inline-block;
}
header {
    background-color: #41C7C7;

    display: grid;
    grid-template-columns: [logo-start] fit-content(20%) [nav-start] auto [nav-end];
}

section#hero {
    background-color: #36ADAD;
    padding: 2em;
    border-top: 5px solid #2EA0A0;

    display: grid;
    grid-template-columns: repeat(2, auto);
}

#content h1 {
    text-transform: uppercase;
    color: #FFFBC5;
}

#content p {
    color: #fff;
}

img {
    max-width: 100%;
    background-size: cover;
    margin: 0 auto;
}

#mountain {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.sidebar {
    grid-area: sidebar;
    background: #1c9090;
    color: #ffffff;
    padding: 1em;
}

.main {
    height: auto;
    grid-area: right;
    grid-template-rows: 51px fit-content(30%) auto auto;
    display: grid;
}

footer {
    grid-area: footer;
    background: lightgray;
}

#features {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align: center;
}

#features i {
    font-size: 2em;
}

ul#features {
    margin: 0; padding: 0;
}

ul#features li {
    background-color: lightgray;
    padding: 1em;
}

ul#features li p {
    color: #4C4C4C;
}

ul#features li:nth-child(1) {
    background-color:#E6E6E6;
}
ul#features li:nth-child(2) {
    background-color:#D3D3D3;
}
ul#features li:nth-child(3) {
    background-color:#CACACA;
}
ul#features li:nth-child(4) {
    background-color:#E6E6E6;
}
ul#features li:nth-child(5) {
    background-color:#D3D3D3;
}

section#info {
    background-color: #F2F2F2;
    padding: 2em;

    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

#mountain-vector {
    width: 200px;
    align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="sidebar">
        <p>Some information here</p>
    </div>
    <div class="main">
        <header>
            <a href="#" id="logo">ImportantCo</a>

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section id="hero">
            <div id="content">
                <h1>Sensible Solutions</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
            </div>
            <img src="images/mountain.jpg" id="mountain" alt="<mountain.jpg>">
        </section>

        <section id="info">
            <div id="content2">
                <h2>Reinvention</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
            </div>
            <img src="images/vector-mountains.svg" id="mountain-vector" alt="<vector-mountains.svg>">
        </section>

        <ul id="features">
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
            <li>
                <i class="fa fa-id-card" aria-hidden="true"></i>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>My footer bar</p>
    </footer>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...