matiasnegro Posted December 9, 2021 Share Posted 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2021 Share Posted December 9, 2021 Remove the height and max-height rules from the columns. The height rules limit how tall the background color will be. Link to comment Share on other sites More sharing options...
matiasnegro Posted December 9, 2021 Author Share Posted 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? Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2021 Share Posted 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now