How do I make the background color continue?

matiasnegro · December 9, 2021

I need to make the background color continue after I scroll, otherwise it looks weird. Somebody knows how to do it?

<!DOCTYPE html>
<html>
<head>
<title>Estructura HTML Prototípica</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="description" content="Descripción del contenido de la página">
<meta name="author" content="Nombre del dueño de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<style>
body
{background-color:black;}

.header
{background-color: black;
padding: 20px;
text-align: center;
color: white;}

.topnav
{overflow: hidden;
background-color: #333;
width: 100%;
border-radius: 25px;}

.topnav a
{float:left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: purple;}

.topnav a:hover
{background-color: #ddd;
color: black;} 

.column
{float: left;
padding: 1%;
margin: 1%;
color: white;
height: 33vmax;
max-height: 30vmax;
border-radius: 25px;}

.column.side
{width: 19%;
background-color: orange;
background-clip: padding-box;}

.column.middle
{width: 50%;
background-color: blue;}

.footer
{background-color: tomato;
text-align: center;
color: white;
display: block;
height: 3vh;
clear: both;}
</style>

<body>
<div class="header">
<h1>Modelaje</h1>
</div>  
    
<div class="topnav">
<a href="#">Home</a>
<a href="#">Portfolio Completo</a>
<a href="#">Contacto</a>
<a href="#" style="float:right"">Login</a>
</div>

<br>

<div class="row" style="overflow: auto;">
<div class="column side">
<h2>Side 1</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>

<div class="column middle">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
</p>
</div>

<div class="column side">
<h2>Side 2</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>
</div>

<div class="footer">
<p>Todos los derechos reservados. 2022</p>
</div>

</body>
</html>

practica web layou.html

Ingolme · December 9, 2021

Remove the height and max-height rules from the columns. The height rules limit how tall the background color will be.

matiasnegro · December 9, 2021

1 hour ago, Ingolme said:

Remove the height and max-height rules from the columns. The height rules limit how tall the background color will be.

Thanks, it worked! But... now, how do I make the middle column to be the same size as the side columns all the time?

Ingolme · December 9, 2021

You'll have to make your layout with flexboxes.

The CSS tutorial has four pages dedicated to flexbox, here is the first one: https://www.w3schools.com/css/css3_flexbox.asp

Sign In

How do I make the background color continue?

Recommended Posts

matiasnegro

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity