I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
Related
I have a that is changing in width (col-x) and in height (h-100) depending on the browser window. Inside that div is a very large image being displayed. The problem with .img-fluid is that it is only constraining in width, depending on the container. But I need a solution that also scales height, when the size of the container div shrinks. But I have not found a solution.
I tried different combinations of min-height, max-height, object-fit and so on, but always the image does not shrink in width, when the container gets smaller (or then when the proportions of the div change from portrait to landscape it does not follow.
I tried to build a basic plunker to demonstrate using vh for the height of the wrapper. So the goal would be for both images to always stay inside the column. You can try playing around with the height and width of the browser to see the effect.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}
https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview
Add css height:100%; for image
I've tried to find a solution to this seemingly simple issue, but with no luck. I'm using AngularJS and Angular Material.
index.html
<div class="parent" layout="column" layout-fill ng-view>
</div>
Example HTML template:
<div class="child" layout="column" layout-fill>
<div flex="20">
Some content
</div>
<div flex>
Some more content
</div>
</div>
(There's nothing in the parent and child CSS classes, used just for name reference here)
In case the content is shorter than the screen height, I want both parent and child divs to be full height and the content divs to expand according to the flex properties. The layout-fill directive from Angular Material adds the 100% height, so this is currently working.
In case the content is longer than what can be displayed withing the screen height, I would like the child div to be scrollable.
My idea was to use media queries to append class properties to the child div in case height is below say 400px.
#media screen and (max-height: 400px){
.child{
height: 400px;
overflow-y: scroll;
}
}
Unfortunately this doesn't work. The child height is the same as the parent (screen height). When inspecting the element (Chrome) it says that css height is 400px, but the computed height is not.
I really don't understand that.
JSFiddle
Any ideas?
I would change the settings in the media query to
child {
min-height: 400px;
overflow-y: visible;
}
That forces it to be as high as its content and at least 400px, which will scroll in the body.
https://jsfiddle.net/zy0o7jn6/1/
I'm using Bootstrap 3 and I'm trying to make a scrollable content DIV.
I have a grid with a left side navigation and a top bar and in the
middle I have the content that should be scrollable.
It works when I use a fixed height on the content div...but I want
to use 100% instead.
<div class="col-lg-12 col-md-12 col-sm-12" style="height:100%;overflow-y:auto;">
some content...
</div>
CSS:
html,body
{
height:100%;
overflow:hidden;
}
How could I get this to work with height:100%;
Thanks!
You can add pre-scrollable class for the div you want to scroll.
If you search the .css there is a max-height but you cant edit. So you have sure it will maximize the page in the window for that max value.
Hope it helps, i used the same for a one-page with scrollable divs.
How do you get a div that expands to the full size of the browser (no matter how you resize) while working with the 960 grid system? I can only think of something like this - but I don't like it because what if you have a background for the container_24 then you'd have to set it two times. The point is, I want everything else working under the container_24 even the text inside the full expanding div.
<div class="container_24">
<!-- stuff -->
</div>
<div style="width: 100%; background-color: gray;">
<div style="margin: 0 auto; width: 940px;">
Hello
</div>
</div>
<div class="container_24">
<!-- more stuff -->
</div>
Putting a z-index value on both the container and expanding div and having the z-index value for the expanding div larger than the container will lift it out. You then need to set the position of the expanding div to absolute and then it will expand out of the container. I'm sure there are some cases where this won't work/cut it though.
i have a sidebar having many nested divs to place my rounded corrners.but when i tried to set the content's div height equal to 90% its not expanding.what is the issue.my html,body have 100% height.my div nest is some what like this.
<body>
<div class="main"> //it contains header n content div,its height is 90%
<div class="header"></div> //its height is 10% of main div
<div class="content"> //its height is 90% of main div
<div class="vertical_navigation"> //its height is 99% of content div
<div><div><div><div> //thses divs are for rounded corner image concept
<div> </div> //this div contains the data.now its height is 80% but its not expanding?h
//i cant use min-height,its not working too.how to give height referenced to //vertical navi div??
</div></div></div></div>
</div>
</div>
</div>
<footer></footer>
</body>
have you considered applying rounded corners with just css and not worrying about the ieretards not having them?
When having so much nested div, it's good you consider the measurement in width and height of the DIV if the container div is lesser that the ones inside it, it won't stretch,because that way, the browser can't detect how far the div is meant to stretch. to resolve this use make proper use of CSS.