Почему появляется вертикальный скролл?

Рейтинг: 0Ответов: 3Опубликовано: 18.05.2023

Объясните пожалуйста почему появляется вертикальный скролл и как избавиться от него ? HTML:

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: rgb(235, 235, 235);
    align-items: center;
    box-shadow: 0px 1px 10px rgb(132, 131, 131);
    z-index: 2;
}

.logo {
    height: 40px;
    width: 40px;
    margin-left: 40px;
    display: flex;
    align-items: center;
}

.logo__img {
    width: 100%;
    height: 100%
}

.logo__text {
    color: rgb(17, 126, 75);
    font-weight: 500;
}

main {
    height: 100%;
    width: 100%;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.side-bar {
    width: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(235, 235, 235);
    z-index: 1;
}

.bar-item {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    transition: background .2s linear;
}

.bar-item:hover {
    background-color: rgb(181, 180, 180)
}

.bar-item__wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar-item__text {
    color: black;
}

.container {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(240, 240, 240);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 2fr;
    justify-items: center;
    align-items: center;
    overflow: auto;
}

.block {
    height: 100%;
    width: 100%;
    background-color: rgb(215, 215, 215);
    display: flex;
    flex-direction: column;
    border-radius: 15px;
}

.block-other {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.block-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(177, 177, 177);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.block-header__title {
    font-weight: bold;
    color: white;
}

.block-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.block-user .block-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-avatar {
    height: 200px;
    width: 170px;
}

.user-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.user-description {
    margin-top: 20px;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.description-line {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.user-description__user-name {
    font-size: 20px;
}
<body>
    <div class="main">
        <header class="header">
            <div class="logo">
                <img class="logo__img"
                    src="https://pluspng.com/img-png/autodesk-logo-png-autodesk-unveils-complete-manufacturing-software-portfolio-tct-magazine-2272.png"
                    alt="">
                <span class="logo__text">
                    Company
                </span>
            </div>
        </header>
        <main>
            <section class="wrapper">
                <nav class="side-bar">
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Profile
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Message
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Music
                                </span>
                            </div>
                        </a>
                    </div>
                </nav>
                <div class="container">
                    <div class="block block-user">
                        <div class="block-header">
                            <span class="block-header__title">User</span>
                        </div>
                        <div class="block-container">
                            <div class="user-avatar">
                                <img class="user-avatar__img"
                                    src="https://sh71-ryazan-r62.gosweb.gosuslugi.ru/netcat_files/9/67/1649232769_58_vsegda_pomnim_com_p_pustoe_litso_foto_76.jpg"
                                    alt="">
                            </div>
                            <div class="user-description">
                                <div class="description-line">
                                    <span class="user-description__user-name">Denis Nikotin</span>
                                </div>
                                <div class="description-line">
                                    <span class="user-description__user-age">22 years old</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block block-other">
                        <div class="block-header">
                            <span class="block-header__title">Other</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                    <div class="block block-news">
                        <div class="block-header">
                            <span class="block-header__title">News</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>

css html frontend
Источник: Stack Overflow на русском

Ответы

▲ 0

Именно в этом случае скролл дает grid-template-rows: 1fr 2fr; у контейнера

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: rgb(235, 235, 235);
    align-items: center;
    box-shadow: 0px 1px 10px rgb(132, 131, 131);
    z-index: 2;
}

.logo {
    height: 40px;
    width: 40px;
    margin-left: 40px;
    display: flex;
    align-items: center;
}

.logo__img {
    width: 100%;
    height: 100%
}

.logo__text {
    color: rgb(17, 126, 75);
    font-weight: 500;
}

main {
    height: 100%;
    width: 100%;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.side-bar {
    width: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(235, 235, 235);
    z-index: 1;
}

.bar-item {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    transition: background .2s linear;
}

.bar-item:hover {
    background-color: rgb(181, 180, 180)
}

.bar-item__wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar-item__text {
    color: black;
}

.container {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(240, 240, 240);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    /*grid-template-rows: 1fr 2fr;*/
    justify-items: center;
    align-items: center;
    overflow: auto;
}

.block {
    height: 100%;
    width: 100%;
    background-color: rgb(215, 215, 215);
    display: flex;
    flex-direction: column;
    border-radius: 15px;
}

.block-other {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.block-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(177, 177, 177);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.block-header__title {
    font-weight: bold;
    color: white;
}

.block-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.block-user .block-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-avatar {
    height: 200px;
    width: 170px;
}

.user-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.user-description {
    margin-top: 20px;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.description-line {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.user-description__user-name {
    font-size: 20px;
}
<body>
    <div class="main">
        <header class="header">
            <div class="logo">
                <img class="logo__img"
                    src="https://pluspng.com/img-png/autodesk-logo-png-autodesk-unveils-complete-manufacturing-software-portfolio-tct-magazine-2272.png"
                    alt="">
                <span class="logo__text">
                    Company
                </span>
            </div>
        </header>
        <main>
            <section class="wrapper">
                <nav class="side-bar">
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Profile
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Message
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Music
                                </span>
                            </div>
                        </a>
                    </div>
                </nav>
                <div class="container">
                    <div class="block block-user">
                        <div class="block-header">
                            <span class="block-header__title">User</span>
                        </div>
                        <div class="block-container">
                            <div class="user-avatar">
                                <img class="user-avatar__img"
                                    src="https://sh71-ryazan-r62.gosweb.gosuslugi.ru/netcat_files/9/67/1649232769_58_vsegda_pomnim_com_p_pustoe_litso_foto_76.jpg"
                                    alt="">
                            </div>
                            <div class="user-description">
                                <div class="description-line">
                                    <span class="user-description__user-name">Denis Nikotin</span>
                                </div>
                                <div class="description-line">
                                    <span class="user-description__user-age">22 years old</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block block-other">
                        <div class="block-header">
                            <span class="block-header__title">Other</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                    <div class="block block-news">
                        <div class="block-header">
                            <span class="block-header__title">News</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>

▲ 0

Попробуйте мой вариант

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: rgb(235, 235, 235);
    align-items: center;
    box-shadow: 0px 1px 10px rgb(132, 131, 131);
    z-index: 2;
}

.logo {
    height: 40px;
    width: 40px;
    margin-left: 40px;
    display: flex;
    align-items: center;
}

.logo__img {
    width: 100%;
    height: 100%
}

.logo__text {
    color: rgb(17, 126, 75);
    font-weight: 500;
}

main {
    height: 100%;
    width: 100%;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.side-bar {
    width: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(235, 235, 235);
    z-index: 1;
}

.bar-item {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    transition: background .2s linear;
}

.bar-item:hover {
    background-color: rgb(181, 180, 180)
}

.bar-item__wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar-item__text {
    color: black;
}

.container {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(240, 240, 240);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: center;
    overflow: auto;
}

.block {
    height: 100%;
    width: 100%;
    background-color: rgb(215, 215, 215);
    display: flex;
    flex-direction: column;
    border-radius: 15px;
}

.block-other {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.block-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(177, 177, 177);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.block-header__title {
    font-weight: bold;
    color: white;
}

.block-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.block-user .block-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-avatar {
    height: 180px;
    width: 170px;
}

.user-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.user-description {
    margin-top: 20px;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.description-line {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.user-description__user-name {
    font-size: 20px;
}
<body>
    <div class="main">
        <header class="header">
            <div class="logo">
                <img class="logo__img"
                    src="https://pluspng.com/img-png/autodesk-logo-png-autodesk-unveils-complete-manufacturing-software-portfolio-tct-magazine-2272.png"
                    alt="">
                <span class="logo__text">
                    Company
                </span>
            </div>
        </header>
        <main>
            <section class="wrapper">
                <nav class="side-bar">
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Profile
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Message
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Music
                                </span>
                            </div>
                        </a>
                    </div>
                </nav>
                <div class="container">
                    <div class="block block-user">
                        <div class="block-header">
                            <span class="block-header__title">User</span>
                        </div>
                        <div class="block-container">
                            <div class="user-avatar">
                                <img class="user-avatar__img"
                                    src="https://sh71-ryazan-r62.gosweb.gosuslugi.ru/netcat_files/9/67/1649232769_58_vsegda_pomnim_com_p_pustoe_litso_foto_76.jpg"
                                    alt="">
                            </div>
                            <div class="user-description">
                                <div class="description-line">
                                    <span class="user-description__user-name">Denis Nikotin</span>
                                </div>
                                <div class="description-line">
                                    <span class="user-description__user-age">22 years old</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block block-other">
                        <div class="block-header">
                            <span class="block-header__title">Other</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                    <div class="block block-news">
                        <div class="block-header">
                            <span class="block-header__title">News</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>

▲ 0

Как вам уже подсказывали в комментариях, просто в main замените height: 100% на height: calc(100% - 60px) 60px - высота header.

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: rgb(235, 235, 235);
    align-items: center;
    box-shadow: 0px 1px 10px rgb(132, 131, 131);
    z-index: 2;
}

.logo {
    height: 40px;
    width: 40px;
    margin-left: 40px;
    display: flex;
    align-items: center;
}

.logo__img {
    width: 100%;
    height: 100%
}

.logo__text {
    color: rgb(17, 126, 75);
    font-weight: 500;
}

main {
    height: calc(100% - 60px);
    width: 100%;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.side-bar {
    width: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(235, 235, 235);
    z-index: 1;
}

.bar-item {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    transition: background .2s linear;
}

.bar-item:hover {
    background-color: rgb(181, 180, 180)
}

.bar-item__wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar-item__text {
    color: black;
}

.container {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(240, 240, 240);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 2fr;
    justify-items: center;
    align-items: center;
    overflow: auto;
}

.block {
    height: 100%;
    width: 100%;
    background-color: rgb(215, 215, 215);
    display: flex;
    flex-direction: column;
    border-radius: 15px;
}

.block-other {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.block-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(177, 177, 177);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.block-header__title {
    font-weight: bold;
    color: white;
}

.block-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.block-user .block-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-avatar {
    height: 200px;
    width: 170px;
}

.user-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.user-description {
    margin-top: 20px;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.description-line {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.user-description__user-name {
    font-size: 20px;
}
<body>
    <div class="main">
        <header class="header">
            <div class="logo">
                <img class="logo__img"
                    src="https://pluspng.com/img-png/autodesk-logo-png-autodesk-unveils-complete-manufacturing-software-portfolio-tct-magazine-2272.png"
                    alt="">
                <span class="logo__text">
                    Company
                </span>
            </div>
        </header>
        <main>
            <section class="wrapper">
                <nav class="side-bar">
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Profile
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Message
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="bar-item">
                        <a class="bar-item__link" href="">
                            <div class="bar-item__wrapper">
                                <span class="bar-item__text">
                                    Music
                                </span>
                            </div>
                        </a>
                    </div>
                </nav>
                <div class="container">
                    <div class="block block-user">
                        <div class="block-header">
                            <span class="block-header__title">User</span>
                        </div>
                        <div class="block-container">
                            <div class="user-avatar">
                                <img class="user-avatar__img"
                                    src="https://sh71-ryazan-r62.gosweb.gosuslugi.ru/netcat_files/9/67/1649232769_58_vsegda_pomnim_com_p_pustoe_litso_foto_76.jpg"
                                    alt="">
                            </div>
                            <div class="user-description">
                                <div class="description-line">
                                    <span class="user-description__user-name">Denis Nikotin</span>
                                </div>
                                <div class="description-line">
                                    <span class="user-description__user-age">22 years old</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block block-other">
                        <div class="block-header">
                            <span class="block-header__title">Other</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                    <div class="block block-news">
                        <div class="block-header">
                            <span class="block-header__title">News</span>
                        </div>
                        <div class="block-container">
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>