Colunas de mesma altura
How do I make an colunas de mesma altura?
Para o tópico http://forum.imasters.com.br/topic/507789-colunas-de-divs-ajustveis-com-contedo/. What is a colunas de mesma altura? How do you make a colunas de mesma altura? This script and codes were developed by Diéssica Gurskas on 10 January 2023, Tuesday.
Colunas de mesma altura - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colunas de mesma altura</title> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Método 1</h1>
<h2>Simulando coluna: basta deixar a cor de "principal" (yellow) como a mesma do sidebar (red)</h2>
<!-- método 1 -->
<div id="principal"> <div id="coluna">Coluna</div> <div id="conteudo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laborum in provident incidunt iure officiis accusamus est harum fuga ex nostrum dicta unde quam veniam sint autem eos. Reiciendis natus facilis sed ab aspernatur cumque consequuntur corrupti sint obcaecati et perferendis veritatis eveniet officia autem suscipit rerum quod numquam aliquam alias sunt iure pariatur ratione placeat magnam porro repellendus quisquam neque doloribus dolor quaerat maiores assumenda tenetur voluptatem nisi modi doloremque maxime. Dolorem harum eius blanditiis culpa voluptas adipisci eos corporis magnam quas delectus sit maiores distinctio magni laborum non eum laudantium tempora et debitis quisquam quo ipsum ab porro!</p> </div>
</div>
<!---------------------------------------------------------------->
<h1>Método 2</h1>
<h2>Propriedade position</h2>
<!-- método 2 -->
<div id="principal2"> <div id="principal2_dentro"> <div id="coluna2">Coluna</div> <div id="conteudo2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laborum in provident incidunt iure officiis accusamus est harum fuga ex nostrum dicta unde quam veniam sint autem eos. Reiciendis natus facilis sed ab aspernatur cumque consequuntur corrupti sint obcaecati et perferendis veritatis eveniet officia autem suscipit rerum quod numquam aliquam alias sunt iure pariatur ratione placeat magnam porro repellendus quisquam neque doloribus dolor quaerat maiores assumenda tenetur voluptatem nisi modi doloremque maxime. Dolorem harum eius blanditiis culpa voluptas adipisci eos corporis magnam quas delectus sit maiores distinctio magni laborum non eum laudantium tempora et debitis quisquam quo ipsum ab porro!</p> </div> </div>
</div>
<!---------------------------------------------------------------->
<h1>Método 3</h1>
<h2>Manipulando o display</h2>
<!-- método 3 -->
<div id="principal3"> <div id="coluna3">Coluna</div> <div id="conteudo3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laborum in provident incidunt iure officiis accusamus est harum fuga ex nostrum dicta unde quam veniam sint autem eos. Reiciendis natus facilis sed ab aspernatur cumque consequuntur corrupti sint obcaecati et perferendis veritatis eveniet officia autem suscipit rerum quod numquam aliquam alias sunt iure pariatur ratione placeat magnam porro repellendus quisquam neque doloribus dolor quaerat maiores assumenda tenetur voluptatem nisi modi doloremque maxime. Dolorem harum eius blanditiis culpa voluptas adipisci eos corporis magnam quas delectus sit maiores distinctio magni laborum non eum laudantium tempora et debitis quisquam quo ipsum ab porro!</p></div>
</div>
</body>
</html>
Colunas de mesma altura - Script Codes CSS Codes
/* MÉTODO 1 */
#principal {
background: #34495e; /* essa cor deve ser a mesma de #sidebar, altere para background: red e veja o efeito */
overflow: hidden;
}
#coluna {
float:left;
width:200px;
background: #3498db;
}
#conteudo {
float:left;
width:600px;
background: #2980b9;
}
/* MÉTODO 2 */
#principal2 {
float:left;
overflow: hidden;
background: #2980b9;
}
#principal2_dentro {
float:left;
background: #3498db;
position: relative;
right: 600px;
}
#coluna2 {
float: left;
width: 200px;
left: 600px;
position: relative;
}
#conteudo2 {
float: left;
width: 600px;
left: 600px;
position: relative;
}
/* MÉTODO 3 */
#principal3 { display: table; }
#coluna3 { background: #3498db; width: 200px; }
#conteudo3 { background: #2980b9; width: 600px; }
#coluna3, #conteudo3 { display: table-cell; }
/* inútil */
body { width: 800px; margin: auto; font-family: 'Allerta'; }
h1, h2 { font-weight: normal; }
![Colunas de mesma altura - Script Codes](http://shots.codepen.io/diessica/pen/zpyLH-512.jpg)
Developer | Diéssica Gurskas |
Username | diessica |
Uploaded | January 10, 2023 |
Rating | 3 |
Size | 2,479 Kb |
Views | 2,024 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS is incredibly awesome | 3,087 Kb |
Equal Height Columns Sass mixin | 3,861 Kb |
Hover to show the text | 3,395 Kb |
CSS Sine Waves | 4,102 Kb |
CSS is AWESOME | 3,349 Kb |
Git logo with CSS | 3,138 Kb |
Tooltip with title attribute | 1,663 Kb |
How checkbox hack works | 4,120 Kb |
Floating labels with CSS only | 3,966 Kb |
CSS Tube explodes | 5,035 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Fading text with CSS blend modes | Giana | 3,305 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!