I have three sticky div's in my boostrap container with different heights.
Is it possible to set scroll priority for my main container?
<div id="header">Header</div>
<div class="container">
<div class="row">
<div id="side-l" class="col-sm-3">
<p>Sidebar left</p>
<p class="bottom-most">This is not that important</p>
</div>
<div id="main" class="col-sm-7">
<p>Main</p>
<p class="bottom-most">I want to see this asap</p>
</div>
<div id="side-r" class="col-sm-2">
<p>Sidebar right</p>
</div>
</div>
</div>
Case now:
When I scroll, the main container does not scroll until side-l reaches the bottom.
My goal:
When I scroll, the main container should scroll immediately when the div-height is larger than window-height.
Note The heights of containers can vary based on its content. They don't have fixed heights.
If this is not possible, is there an option, where you can only scroll the hovered element?
Js fiddle:
https://jsfiddle.net/h5m7ovsb/3/
I have added a fiddle link below. Please check if this could help you.
I have edited the below CSS code:
#side-l {
height: 1800px;
background: rgba(255,0,0,0.1);
position: relative;
top: 0px;
}
https://jsfiddle.net/xLmuffyx/
Related
How can I ajdust container to make it full width?
This is the space that's container taking right now, but I want it to have full width (like website).
I have created it like this
<div class="container-fluid container-va">
<div class="row row-dk">
<div class="col-md-12">
<p>SOME TEXT</p>
</div>
</div>
</div>
I have tried adjusting css like:
.container-va {
width: 100%;
}
but it doesn't work... Help please!
I want to create grid view, where header contains 10% height of the page and body 90%.
I have tried to adjust this, but body part does not grow when element section on right hand scales.
I want to add elements in right panel in responsive manner.
Is there any good way to organize this?
fiddle: http://jsfiddle.net/karimkhan/q18yzkoz/5/
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background-color:lavender;">
<div class="header">Header Height should be 10% of the page</div>
</div>
</div>
<div class="row" >
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
<div class="row" >
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item1</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item2</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item3</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item4</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item5</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item6</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item7</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item8</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item9</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item10</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item11</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item12</div>
</div>
</div>
</div>
</div>
</body>
You have a ton of divs that you're not actually using. ALL of those need to explicitly be set to 100% height and also have a wrapper.
Take a look at this pen: http://codepen.io/anon/pen/bdOyJp
You have a ton of nested divs. I cut the HTML down to this:
<div class="header">Header Height should be 10% of the page</div>
<div class="content row">
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">
Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- all the items... -->
</div>
</div>
And here's what I cut the CSS down to:
html, body {
height: 100%;
}
.header {
height : 10%;
background: teal;
}
.content {
width: 100%;
height: 90%;
background: deeppink;
}
I set a background on .content so that it would fill the right column. It is a 'faux column' technique but there are many more.
Neither the BODY (.col-xs-8) or the HEADER (.header) heights in your code are being recognized. Hence, not only is the body not 90%, but the header is not 10%. The height of the header is simply the height of the content. You can plug in other percentage values and you'll see nothing changes.
This is caused by the multitude of nested containers and various assigned heights in your code, which is a bit confusing and convoluted. However, your mark-up doesn't have to change to accomplish your goal.
Below are my adjustments to your code. I've used inline styles. Eventually, you may want to move these styles to your external stylesheet which may be better for clarity, convenience and maintenance, but I've used inline styles here for demonstration purposes.
First, add a 100% height to your primary div container:
<div class="container-fluid" style="height: 100%;">
Second, add a 10% height to your header row and include the inline styles from the child div.
<div class="row" style="height: 10%; background-color:lavender;">
<div class="col-xs-12" //DELETE THIS: style="background-color:lavender;"//>
Third, add a 90% height to your body row and and include the inline styles from the child div.
<div class="row" style="height: 90%; background-color: lavenderblush;">
<div class="col-xs-8" //DELETE THIS: style="background-color:lavenderblush; height:100%"//>
This does the trick. I gives you 10% for the height and 90% for the body.
http://jsfiddle.net/q18yzkoz/6/
Just keep in mind that the 90% is relative to the parent container (.container-fluid) with height 100%, which is relative to the HTML/BODY height 100%. So it extends all the way down to the bottom of the page (which is what your questions asks).
However, if you want the body div to match the right column, adjust the height value of the body row from 90% to ~55%.
http://jsfiddle.net/q18yzkoz/8/
OR, you can reduce the height value of the parent container (.container-fluid) to, let's say, 70%, and work from there.
Lastly, you stated in your question:
Is there any good way to organize this?
There are other ways to create a responsive grid layout that may be more efficient and robust. Here are four methods you may want to consider:
Easy Responsive CSS Grid Layouts
Hope this helps. If you have any questions leave a comment below.
I want to know how can I extend every DIVs inside a div wrapper. My div wrapper is fixed and has a width of 980px.
My HTML goes here:
<div id="wrapper" >
<div id="header" >
<strong>HEADER</strong>
</div>
<nav>
<strong>Navigation</strong>
</nav>
<div id="content" >
<div class="sidebar" >
<p>sidebar</p>
</div>
<div class="main-content" >
<p>content goes here.....</p>
</div>
</div>
<footer>
<strong>copyright etc....</strong>
</footer>
</div>
Here's the FIDDLE
What I want to achieve is every DIVs which hasbackground-color will expand and max-out the width of wrapper or something like filling the width of body to the fullest. But the content or texts must still has the width of 980px and is fixed. Thanks in advance.
Check this Demo
.div-inner {
width: 500px;
margin: 0 auto;
}
I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>