让我以这个开头作为我的问题：我是一个初学者。对于冗长的代码段和代码，我感到非常抱歉。
我试图使此“标题” /“横幅”（请参见代码）显示其中的所有内容，但是通过使用“溢出：隐藏”，将“标题” /“横幅”中的元素裁剪掉。
示例：如果我尝试将Button移出我显然已经设置（不知道）的这些参数之外，则会被裁剪掉。我想在文本行和按钮之间留出更多空间，而不会被裁剪掉。 就像示例中一样，即使更改按钮的位置，我也不知道全部显示出来。
我很茫然，我尝试更改所有可能的变量。这可能很明显，但我似乎无法使我的想法生效。
/* default margin and padding for all elements */
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* decrese font size of the HTML file */
html {
font-size: 62.5%;
}
/* Creating & styling hamburger menu */
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 3rem;
z-index: 200;
/* create lines for menu */
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #FFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
/* Costomize header */
.header {
width: 100%;
height: 100vh;
/*Header: parent of banner--> set position to relative */
position: relative;
}
/* Banner styling */
.banner {
position: absolute;
top: 20%;
left: 5%;
perspective: 300rem;
overflow: hidden;
}
/* Styling h1 & h2 for banner */
.banner h1 {
font-family: Lobster Two, serif;
font-size: 8rem;
font-weight: 300;
color: darkred;
text-shadow: 0.3rem 0.4rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
.banner1 h2 {
font-family: 'Lobster Two', serif;
font-size: 6rem;
font-weight: 300;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Paragraph styling for banner*/
.banner p {
font-family: 'Mulish', serif;
font-size: 4rem;
font-size: 700;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 1);
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Styling Button */
.banner .btn button {
width: 25rem;
height: 7rem;
background-color: darkred;
border: none;
font-family: 'Josefin Slab', serif;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
box-shadow: 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s forwards;
}
/* Banner animation */
@keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}<body>
<div class="container">
<!-- Menu style with 3 lines -> hamburger -->
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="images/houses.jpg">
</div>
<div class="banner">
<h1>Red String</h1>
<div class="banner1">
<h2>Blah blah blah</h2>
</div>
<p>I dont know what i should put here.</p>
<div class="btn">
<button>Calculate now</button>
</div>
</div>
</header>
</div>
</body>
答案 0 :(得分：0)
我不知道您需要隐藏溢出的上下文，通常您需要设置一定的高度来执行裁剪吗？如果要确保横幅广告不超出100vh上设置的header的范围，则应将overflow:hidden放在此处。但是，它将始终剪切超出其设置高度的所有内容，因为这就是它的用途。
但是，如果您为横幅/父容器提供一些填充，则子元素周围始终会留有空间，包括用于放置阴影等效果的按钮。然后，您也可以将按钮移动到任何地方。
/* default margin and padding for all elements */
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* decrese font size of the HTML file */
html {
font-size: 62.5%;
}
/* Creating & styling hamburger menu */
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 3rem;
z-index: 200;
/* create lines for menu */
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #FFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
/* Costomize header */
.header {
width: 100%;
height: 100vh;
/*Header: parent of banner--> set position to relative */
position: relative;
}
/* Banner styling */
.banner {
background:#ccc;
/*just plopped this bg color in so we can see what's happening better */
padding:5%;
/*give your contents room to breathe with padding */
position: absolute;
top: 20%;
left: 5%;
perspective: 300rem;
overflow: hidden;
}
/* Styling h1 & h2 for banner */
.banner h1 {
font-family: Lobster Two, serif;
font-size: 8rem;
font-weight: 300;
color: darkred;
text-shadow: 0.3rem 0.4rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
.banner1 h2 {
font-family: 'Lobster Two', serif;
font-size: 6rem;
font-weight: 300;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Paragraph styling for banner*/
.banner p {
font-family: 'Mulish', serif;
font-size: 4rem;
font-size: 700;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 1);
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Styling Button */
.banner .btn button {
margin-top:2rem;
width: 25rem;
height: 7rem;
background-color: darkred;
border: none;
font-family: 'Josefin Slab', serif;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
box-shadow: 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s forwards;
}
/* Banner animation */
@keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}<body>
<div class="container">
<!-- Menu style with 3 lines -> hamburger -->
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="images/houses.jpg">
</div>
<div class="banner">
<h1>Red String</h1>
<div class="banner1">
<h2>Blah blah blah</h2>
</div>
<p>I dont know what i should put here.</p>
<div class="btn">
<button>Calculate now</button>
</div>
</div>
</header>
</div>
</body>