Crear un documento HTML usando Bootstrap y hacer más de una columna. La tarea es establecer el control en una columna sobre la altura usando Bootstrap. La forma de hacerlo es utilizando otro div interior en la columna de la izquierda. El div interior debe ser posición: absoluto.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous">
</script>
<title>
How to set one column control
over height in Bootstrap ?
</title>
<style type="text/css">
.bg-1 {
background-color: yellow;
}
.bg-2 {
background-color: lightgreen;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
</center>
<div class='container'>
<div class='row'>
<div class='col-3 bg-1 overflow-auto'>
<div class="position-absolute">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes and
many other contents.
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes and
many other contents.
</div>
</div>
<div class='col-9 bg-2'>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes and
many other contents.
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes and
many other contents.
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes and
many other contents.
</div>
</div>
</div>
</body>
</html>
Producción:
En el ejemplo anterior,
la propiedad position se usa para colocar un componente en relación con la posición de su padre y cambia el diseño a su alrededor.
La propiedad de desbordamiento indica lo que debería suceder en caso de que el contenido desborde el cuadro de un elemento. Esta propiedad indica si recortar el contenido o incluir barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en una región indicada.
Publicación traducida automáticamente
Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA