I have two columns in HTML , and I want to do the following, but I have not achieved it, neither with position or something else, I'll be grateful if you can help me:
column on the left , with vertical and fixed centered content, that does not scrole. column on the right , with scroleable content.
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9>
</div>
</div>
I'll give you an example of more or less what I understood you need, if you have any questions I'll gladly resolve it.
#fila{
margin: 0 auto;
}
#columna1{
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
background: chocolate;
display: flex;
word-break: break-all;
overflow: hidden;
}
#columna1 p{
margin: auto;
color: white;
}
#columna2{
height: auto;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" id="fila">
<div class="col-md-3 col-xs-3" id="columna1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-9 col-md-offset-3 col-xs-9 col-xs-offset-3" id="columna2">
<h1>Hola mundo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>By the name of the classes you use, I understand that the css is bootstrap.
To make a div scrollable you just have to put the class pre-scrollable
With what would remain:
.bordes {
border:solid 1px black }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3 bordes"> Contenido izquierdo</div>
<div class="col-xs-9 pre-scrollable bordes"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In blandit, enim at blandit faucibus, augue risus facilisis libero, non aliquet nibh odio et felis. Praesent eget vehicula ipsum, ac interdum sem. Aenean aliquam sapien nec dui luctus, ac congue diam placerat. Integer tempor iaculis dictum. In vel orci ullamcorper, tempor erat vitae, semper tellus. Morbi ex lectus, sagittis et egestas congue, vehicula id risus. In et augue porta, mollis mi ut, tincidunt turpis. Maecenas eget lectus malesuada, fermentum elit viverra, consectetur nisl.
Donec elementum, turpis id consectetur semper, sem tortor viverra arcu, sit amet mattis est dui et lacus. Ut a lorem quis mi pretium vulputate eu eu sapien. Morbi gravida orci ut nunc interdum molestie. Quisque a nisi hendrerit, dictum magna vitae, eleifend dui. Proin blandit ultricies nunc, quis posuere nibh consectetur dignissim. Sed feugiat aliquet diam non egestas. Nunc libero urna, volutpat ac posuere ac, cursus sit amet ex. Duis volutpat id ante et tristique. Vestibulum feugiat lacinia metus sed molestie. Duis id orci eros. Aliquam finibus ultricies maximus. Aliquam laoreet gravida malesuada. Donec tristique sed arcu ac iaculis. Donec eget lacus lorem. In in condimentum tellus. Mauris dapibus varius efficitur.
Integer pretium varius ipsum et dignissim. Donec maximus, mauris eget efficitur accumsan, diam lectus vehicula augue, eu scelerisque lorem ex sit amet tortor. Sed vitae massa interdum, sollicitudin nibh vitae, efficitur lectus. Sed dapibus hendrerit mollis. Duis sit amet lacinia felis, sed condimentum tellus. Aliquam tincidunt tortor aliquet consequat sodales. Sed facilisis nisi justo, ac ornare augue tincidunt vel. Ut egestas purus ut arcu malesuada, ac mollis elit semper. Nulla sit amet lacus vel odio gravida pellentesque. Maecenas et ipsum risus.
In nisl velit, ullamcorper vel imperdiet vitae, interdum vel libero. Vivamus fringilla libero nec bibendum cursus. Pellentesque mauris quam, feugiat vitae ultrices eu, dapibus sit amet quam. Donec at dolor quam. Nulla risus enim, interdum at quam ut, volutpat scelerisque eros. Ut fermentum maximus laoreet. Cras accumsan posuere velit eget lobortis. Curabitur varius ac nunc laoreet bibendum. Suspendisse pharetra odio leo, viverra fringilla elit luctus ut. Quisque pretium semper aliquet. Vivamus at aliquam risus. Maecenas lorem felis, sodales in tincidunt nec, molestie vitae arcu. Nunc non bibendum nulla. Nunc augue nunc, vulputate non enim eget, tempor varius metus. Nullam at est gravida, dignissim sapien nec, ornare ex. Cras consectetur leo at ullamcorper euismod.
Aliquam consequat tortor in convallis scelerisque. Donec mollis at eros sed aliquet. Etiam id tempor dolor. Suspendisse faucibus ex nisl, vel dignissim risus sodales vitae. Suspendisse vehicula diam nec magna ultricies laoreet. Vivamus placerat metus quis nisi tincidunt, et imperdiet ante semper. Aenean vehicula nunc in vehicula cursus. Pellentesque vitae nisl a nulla dignissim pharetra. Ut tempor mollis erat eget tempus. Maecenas consequat vitae urna ut egestas. Maecenas vitae tempus ligula. Etiam convallis massa nunc, eget convallis eros sagittis ac. Suspendisse potenti. Nullam vel euismod libero. Pellentesque efficitur gravida ante.</div>
</div>