|
|
1
Temani Afif
4 年前
删除
height: 100%
position:relative
html,
body,
.innercontainerback {
height: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
min-height: 100%;
position: relative;
}
.innercontainerback,
.innercontainer {
width: 400px;
}
.magenta {
background-color: magenta;
}
.orange {
background-color: orange;
}
.innercontainerback {
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y, repeat-y;
opacity: 0.88;
z-index: 1;
position: absolute;
top: 0px;
}
.innercontainer {
min-height: 100%;
opacity: 1 !important;
position: relative;
z-index: 0;
clear: both;
}
.padding1 {
padding-left: 90px;
padding-right: 90px;
box-sizing: border-box;
padding-top: 32px;
}
<div class="outercontainer">
<div class="innercontainerback orange"></div>
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
</div>
</div>
或者使用伪元素简化代码,如果
vh
避免所有级联
height
/
min-height
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
min-height: 100vh;
display:flex;
width: 400px;
}
.magenta {
background-color: magenta;
}
.innercontainer::before {
content:"";
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y;
background-color: orange;
opacity: 0.88;
z-index: 1;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
.innercontainer {
position: relative;
}
.padding1 {
padding-left: 90px;
padding-right: 90px;
box-sizing: border-box;
padding-top: 32px;
}
<div class="outercontainer">
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
</div>
</div>
|