为什么html同级元素不会变得相同高度？

问题描述 投票：0回答：1

**这是我在这个网站上的第一个问题，在网络开发方面我几乎是一个新手，所以如果这是一个令人难以置信的愚蠢问题，我提前表示抱歉，但我一生都无法弄清楚这个出来：

首先，这是我的html代码，足够简单：**

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>TEST</title>
        <link rel="stylesheet" type="text/css" href="src/css/styles.css">
    </head>
    <body class="flexbox">
         <section id="navbar" class="flexbox">
            <ul>
                <li>Aktuell</li>
                <li>Schauspiel</li>
                <li>Projekte</li>
                <li>Gallerie</li>
                <li>Personalien</li>
                <li>Blog</li>
                <li>Links</li>
                <li>Kontakt</li>
                <li>Impressum</li>
            </ul>
         </section>
         <section id="content" class="flexbox">
            <article id="reel">
                <img src="src/img/istockphoto.jpg" alt="Laechelnde Frau">
            </article>
            <article id="quote">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
            </article>
         </section>
    </body>
</html>

这是相应的CSS：

    /* GENERAL*/

    *{box-sizing: border-box;}

    .flexbox{display: flex;}

    html{font-size: .8vw;
         font-family: Arial, Helvetica, sans-serif;
         width: 100%;
         height: 100%;
         background-color: beige;}

    body{width: 100%;
         margin: 0;
         flex-direction: row;
         align-items: stretch;}

         @media(max-width:425px){#body{flex-direction: column;
                                    align-items: center;}}

    /* NAVIGATION */

    #navbar{background-color: palegreen;
            width: 10%;
            height: 100%;
            flex-direction: column;
            align-items: stretch;}

            @media(max-width:1024px){#navbar{width:12%;}}
            @media(max-width:768px){#navbar{width:14%;}}
            @media(max-width:425px){#navbar{display: none;}}

    #navbar>ul{list-style-type:none;
               background-color: palegreen;
               padding: 0 0 0 0;
               height: 100%;}

    #navbar>ul>li{display:block;
                  font-size: 1.5rem;
                  width: auto;
                  padding: 15% 15% 15% 15%;}

                  @media(max-width:1024px){#navbar>ul>li{font-size: 1.8rem;}}
                  @media(max-width:768px){#navbar>ul>li{font-size: 2rem;}}

    /* CONTENT */

    #content{width: 90%;
             height: 100%;
             flex-direction: column;}

             @media(max-width:1024px){#content{width:88%;}}
             @media(max-width:768px){#content{width:86%;}}
             @media(max-width:425px){#content{width:100%;}}

    #reel{width:60%;
          margin: 7% auto 0 auto;}

          @media(max-width:768px){#reel{width:70%;}}
    

    #reel>img{width:100%;
              border-radius: 10px;}

    #quote{width:60%;
           background-color: palegreen;
           border-radius: 10px;
           font-size: 1.2rem;
           font-style: italic;
           text-align: center;
           line-height: 150%;
           margin: 5% auto 2% auto;
           padding: 1%}

           @media(max-width:1024px){#quote{font-size: 1.5rem;}}
           @media(max-width:768px){#quote{font-size: 2rem;
                                    width:70%;}}
           @media(max-width:425px){#quote{font-size: 3.3rem;}}
           @media(max-width:375px){#quote{font-size: 3.5rem;}}
           @media(max-width:320px){#quote{font-size: 4rem;}}

**我想要发生的是让section#navbar 始终与section#content 具有完全相同的高度，两者都是100% 的显示。所以，我尝试的是给它们两个父元素（body 元素）100% 的高度。

问题是，section#navbar和/或section#navbar>ul的绿色背景不会拉伸到与其同级元素section#content相同水平的底部，尽管它们都从父元素继承了相同的高度.

section#content 较高，它应该定义兄弟元素和父元素主体的整体高度，考虑到后者本身没有特定的高度，因此应该与它需要的高度一样高是显示其所有子元素。

（我一开始的 body 元素也有 height:100%；这在一定程度上解决了这个特定问题，但导致了我不明白的更奇怪的问题，特别是当任何元素不完全在视口内时，所以我放弃了它。我还尝试使用 vh 作为不同元素高度属性的单位，但这导致了几乎相同的混乱。我还尝试给section#navbar和section#navbar>ul .flexbox-class以及一些不同的属性，但没有一个起作用。）

我认为我搞砸了位置属性，因为我仍然无法理解它是如何工作的，因此还没有为任何元素定义它。但我也尝试过，给出了涉及不同位置属性的几个元素，但没有一个有帮助。我也不太了解浮动，所以那些也没有使用过。**

html css height parent-child siblings
1个回答
0
投票

/* GENERAL*/

    *{box-sizing: border-box;}

    .flexbox{display: flex;}

    html{font-size: .8vw;
         font-family: Arial, Helvetica, sans-serif;
         width: 100%;
         height: 100%;
         background-color: beige;}

    body{width: 100%;
         margin: 0;
         flex-direction: row;
         align-items: stretch;}

         @media(max-width:425px){#body{flex-direction: column;
                                    align-items: center;}}

    /* NAVIGATION */

    #navbar{background-color: palegreen;
            width: 10%;
            /*height: 100%;*/
            flex-direction: column;
            align-items: stretch;}

            @media(max-width:1024px){#navbar{width:12%;}}
            @media(max-width:768px){#navbar{width:14%;}}
            @media(max-width:425px){#navbar{display: none;}}

    #navbar>ul{list-style-type:none;
               background-color: palegreen;
               padding: 0 0 0 0;
               height: 100%;}

    #navbar>ul>li{display:block;
                  font-size: 1.5rem;
                  width: auto;
                  padding: 15% 15% 15% 15%;}

                  @media(max-width:1024px){#navbar>ul>li{font-size: 1.8rem;}}
                  @media(max-width:768px){#navbar>ul>li{font-size: 2rem;}}

    /* CONTENT */

    #content{width: 90%;
             height: 100%;
             flex-direction: column;}

             @media(max-width:1024px){#content{width:88%;}}
             @media(max-width:768px){#content{width:86%;}}
             @media(max-width:425px){#content{width:100%;}}

    #reel{width:60%;
          margin: 7% auto 0 auto;}

          @media(max-width:768px){#reel{width:70%;}}
    

    #reel>img{width:100%;
              border-radius: 10px;}

    #quote{width:60%;
           background-color: palegreen;
           border-radius: 10px;
           font-size: 1.2rem;
           font-style: italic;
           text-align: center;
           line-height: 150%;
           margin: 5% auto 2% auto;
           padding: 1%}

           @media(max-width:1024px){#quote{font-size: 1.5rem;}}
           @media(max-width:768px){#quote{font-size: 2rem;
                                    width:70%;}}
           @media(max-width:425px){#quote{font-size: 3.3rem;}}
           @media(max-width:375px){#quote{font-size: 3.5rem;}}
           @media(max-width:320px){#quote{font-size: 4rem;}}
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>TEST</title>
        <link rel="stylesheet" type="text/css" href="src/css/styles.css">
    </head>
    <body class="flexbox">
         <section id="navbar" class="flexbox">
            <ul>
                <li>Aktuell</li>
                <li>Schauspiel</li>
                <li>Projekte</li>
                <li>Gallerie</li>
                <li>Personalien</li>
                <li>Blog</li>
                <li>Links</li>
                <li>Kontakt</li>
                <li>Impressum</li>
            </ul>
         </section>
         <section id="content" class="flexbox">
            <article id="reel">
                <img src="src/img/istockphoto.jpg" alt="Laechelnde Frau">
            </article>
            <article id="quote">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto 
                repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
            </article>
         </section>
    </body>
</html>

您应该可以省略 

height
id 上的 
navbar
属性。由于拉伸，弹性盒会自动处理该高度。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.