英雄部分未覆盖 100% 的显示

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

好吧，我希望我的英雄部分覆盖 100% 的屏幕。现在我正在尝试使用 height: (calc 100vh - 90px)，来自标题的 90 px。唯一的问题是，我的英雄部分和我的“关于”部分之间存在差距。原因可能是自定义的“行高”和负边距。 我不知道没有它如何实现this look。 间隙也会更大/更小，具体取决于浏览器。

HTML：

<header>
        <div class="logo">
            <img src="imgs/logos/MuM-Logo.webp" alt="Mike & Mortiz Logo" class="header-logo"> <!-- Alt-Text hinzugefügt -->
        </div>
        <div class="nav-bar">
        <nav class="top-bar">
            <ul>
                <li><a href="">We</a></li>
                <li><a href="">Work</a></li>
                <li><a href="">Services</a></li>
                <li>
                    <div class="hamburger" id="hamburger1">
                        <div class="line"></div>
                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                </li>
            </ul>
        </nav>
        </div>
    </header>
 <section class="hero-section"> 
        <div class="hero">
            <div id="hero-top">
                <div class="padding">
                    <div>
                        <h3 id="hero-digital">DIGITAL</h3>
                        <h3 id="hero-plastic">PLASTIC</h3>
                    </div>
                </div>
            </div>
            <div id="hero-bottom">
                <div id="hbt">
                    <div>
                        <h3 id="hero-surgery">SURGERY.</h3>
                    </div>
                    <div>
                        <div id="hbt_padding">
                            <button class="btn">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div id="hbd">
                    <div>
                        <h1 id="hero-bottom-text">Eine Medienagentur aus Stuttgart</h1>
                    </div>
                    <img src="imgs/icons/arrow_down.png" alt="Pfeil nach unten" id="arrow_down">
                </div>
            </div>
        </div>
    </section>
    <main>
            <section id="about_us">
                <div id="about_left">
                    <div id="about_left_padding">
                        <div>
                        <h2 id="about_us_heading">Mike und Moritz.</h2>
                        </div>
                        <div>
                        <p id="about_us_text">Lorem ipsum dolor sit amet,<br>
                        consetetur sadipscing elitr,<br>
                        sed diam nonumy eirmod tempor <br>
                        magna aliquyam erat, sed diam<br>
                        voluptua.
                        </div>
                        <button class="btn">Learn more.</button>
                    </div>
                </div>
                <div id="about_img">
                    <img src="imgs/photos/Stock_programmieren.jpg" alt="Programmieren" id="about_programmieren">
                </div>
            </section>
    </main>

CSS：

header{
    width: 100%;
    height: 90px;
    background-color: #191919;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
}

body{
    background-color: #191919;
}

.logo{
    font-size: 27px;
    font-weight: bold;
    color: #e5e5e5;
    width: 10px;
}

.logo .header-logo{
    width: 110px;
}

.nav-bar .top-bar ul{
    display:flex;
    list-style: none;
}

.nav-bar .top-bar li a {
    display: block;
    color: #e5e5e5;
    font-size: 23px;
    border-radius: 50px;
    transition: 0.2s;
    margin: 0 20px;
    text-decoration: none;
    
}

.nav-bar .top-bar ul li  a:hover{
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: 0s;
    
}

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: #e5e5e5;
    display: none;
}

.nav-bar .sidebar ul{
    display:flex;
    height: 100vh;
    list-style: none;
    flex-direction: column;  
    justify-content: center;
    
}

.sidebar li{
    width: 100%;
    text-align: center;
}

.sidebar li:hover{
    width: 100%;
    text-align: center;
    background-color: lightgrey;
}

.nav-bar .sidebar li a {
    display: block;
    color: #191919;
    font-size: 50px;
    text-decoration: none;
    margin: 50px;
}

.side-divider{
    border: lightgrey 0.5px solid;
    width: 100%;
}


.hamburger .line{
    width: 30px;
    height: 3px;
    background-color: #e5e5e5;
    margin: 5px 0;
    border-radius: 60px;
}

.hamburger{
    display: block;
    cursor: pointer;
    margin-left:  30px;
}

.hamburger-sidebar .line{
    width: 30px;
    height: 3px;
    background-color: #191919;
    margin: 5px 0;
    border-radius: 60px;
}

.hamburger-sidebar{
    display: block;
    cursor: pointer;
    position: absolute;
    right: 50px;
    top: 60px;
}

/*HERO STYLING*/

.hero-section {
    height: calc(100dvh - 90px);
    width: 100%;
}


.hero .oben{
    background-color: #191919;
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;

}

.hero .unten{
    background-color: #e5e5e5;
    width: 100%;
}

.hero{
    color: #e5e5e5;
    margin: 0;
    height: 100%;
}

#hero-top{
    width: 100%;
    height: 50%, fit-content;
    background-color: #191919;
}

.padding{
    padding: 0 80px;
}

#hero-digital{
    color: #e5e5e5;
    font-size: 250px;
    font-weight: 600;
    text-align: center;
    padding-top: 80px;
}

#hero-plastic{
    color: #e5e5e5;
    font-size: 150px;
    font-weight: 550;
    padding-left: 121px;
    line-height: 0.75;
    margin-top: -40px;
}

#hero-bottom{
    width: 100%;
    background-color: #e5e5e5;
    height: calc(50% - 70px);
}

#hero-surgery{
    color: #191919;
    font-size: 150px;
    font-weight: 550;
    line-height: 0.75;
    padding-left: 577px;
    margin-top: -7px;
}

#hbd{
    width: 100%;
    background-color: #e5e5e5;
    display: flex;
    flex-direction: row;
    height:50%;
    align-items: end;
}

#hero-bottom-text{
    font-size: 30px;
    color: #191919;
    text-decoration: underline;
    margin-left: 30px;
    margin-bottom: 30px;
    font-weight: 400;
    text-underline-offset: 5px;


}

#hbt{
    height: 50%;
}

.btn{
    background-color: #0714BC;
    height: 40px;
    width: 150px;
    font-size: 20px;
    color: #e5e5e5;
    border-radius: 100px;
    font-weight: 550;
    letter-spacing: 1px;
    border: 0px;
}

#hbt_padding{
    padding: 20px 200px;
    display: flex;
    justify-content: end;
}

#arrow_down{
    width: 50px;
    height: 50px;
    color: #191919;
    flex: 0 1 auto;
    position: absolute;
    left: 50%;
    margin-bottom: 20px;
}

/*About Us Styling*/


#about_us_heading{
    color: #e5e5e5;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 3px;
}

#about_left{
    justify-content: end;
    display: flex;
    width: 50%;
    display: flex;
    
}

#about_left_padding{
}

#about_us_text{
    font-size: 27px;
    color: #e5e5e5;
    margin-top: 10px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

#about_img{
    width: 50%;
    display: flex;
    justify-content: end;
}

#about_programmieren{
    width: 650px;
}

#about_us{
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    min-height: 600px;  
    margin-top: 100px;
    background-color: #191919;
}

我尝试将高度从 vh 更改为 dvh。 任何小费将不胜感激。 :)

css padding margin line-height hero
1个回答
0
投票

为了让英雄部分占据 100% 的屏幕（不包括标题），我的建议是将英雄部分和标题包装在另一个元素中。我们称这个新元素为

.first-page
。设置 
.first-page
样式以占据 100% 的屏幕并使其成为垂直 Flexbox，其子元素是标题和英雄部分。您的标题具有固定的高度，然后您只想拉伸英雄部分以使用剩余空间，因此使用 
flex: 1
（这是 
flex-grow: 1
的简写）来设计它。

body {
  background-color: #191919;
  margin: 0;
}

.first-page {
  height: 100svh;  
  display: flex;
  flex-direction: column;
}

header {
  height: 90px;
  background-color: #191919;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
}

.logo {
  height: 80%;
}

.nav-bar .top-bar ul {
  display: flex;
  list-style: none;
}

.nav-bar .top-bar li a {
  display: block;
  color: #e5e5e5;
  font-size: 23px;
  border-radius: 50px;
  transition: 0.2s;
  margin: 0 20px;
  text-decoration: none;
}

.nav-bar .top-bar ul li  a:hover{
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: 0s;
}

.hamburger .line {
  width: 30px;
  height: 3px;
  background-color: #e5e5e5;
  margin: 5px 0;
  border-radius: 60px;
}

.hamburger {
  display: block;
  cursor: pointer;
  margin-left:  30px;
}

/* Hero */

.hero-section {
  background: green;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

/* About Us */

#about_us {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

#about_left {
  padding: 1em;
}

#about_us_heading {
  color: #e5e5e5;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 3px;
}

#about_us_text {
  font-size: 27px;
  color: #e5e5e5;
  margin-top: 10px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

#about_programmieren {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="first-page">
  <header>
    <img src="http://picsum.photos/220/110" class="logo">
    <div class="nav-bar">
      <nav class="top-bar">
        <ul>
          <li><a href="">We</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Services</a></li>
          <li>
            <div class="hamburger" id="hamburger1">
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="hero-section">
    <p>.hero-section</p>
    <p>This takes up the remainder of .first-page</p>
  </section>
</div>
<main>
  <section id="about_us">
    <div id="about_left">
      <div id="about_left_padding">
        <div>
          <h2 id="about_us_heading">Mike und Moritz.</h2>
        </div>
        <div>
          <p id="about_us_text">Lorem ipsum dolor sit amet,<br>
          consetetur sadipscing elitr,<br>
          sed diam nonumy eirmod tempor <br>
          magna aliquyam erat, sed diam<br>
          voluptua.</p>
        </div>
        <button class="btn">Learn more.</button>
      </div>
    </div>
    <div id="about_img">
      <img src="http://picsum.photos/500" id="about_programmieren">
    </div>
  </section>
</main>

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