I have decided to add a sidebar to the left side of all my pages in my website. The sidebar can either be concealed or visible, I do not want it to overlap the existing page.
If I were to have a sidebar as such, the content of the page tends to overflow with the container. I need the content to change according to its container width rather than the browser width.
I do not want to create a container for the content and set overflow-y to auto and make it stretch to browser height as I would need to do this for all my pages...
I have already tried changing the left margin on the body and adding a div with position: fixed as a sidebar.
How would I go about changing the content according to its container width rather than the browser width?
Try something like the approach below:
#content {
width: 80%; /* Adjust as need */
position: relative;
}
#content .children {
max-width: 100%; /* Or less, to keep the children from overflowing */
}
Note: I used imaginary ID and Class
Check this FIDDLE
This is like a mobile phone prototype where I have fixed height of 50px for header-div and footer-div.
I want the content-div to dynamically adjust its height according to the main-container (which here is acting as mobile screen size). Adjust in such a way that the content overflow should be scrollable in the visible content-div height only.
If I put header-div and footer-div height both 10% and content-div height 80%. So that it arranges according to the screen size. Trouble here is that the header and footer heights will vary according to screen sizes and as a result will make header-div and footer-div bigger/smaller in height.
This is why I have set a certain height for header-div and footer-div both that is 50px. Now I want the content-div to be adjusted in such a way that it dynamically changes its height in accordance to the main-container (parent div)
Appreciate any help. Thanks.
I tried this and I am not sure if you would like it that way but here's what I've got for you...
Change your CSS code for main-container to this.
.main-container {
width: 420px;
height: auto;
background-color: #f7f7f7;
}
change your css code for main-container
.main-container {
width: 420px;
height: 1.2em; //change as per your requirements
background-color: #f7f7f7;
}
Web Style Sheets
CSS tips & tricks
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?
Here is the code
HTML
<header>
this is a header
</header>
<div class="container">
this is a container
</div>
CSS
header {
width: 90%;
height: 100px;
background: blue;
position: fixed;
z-index: 100;
}
.container {
width: 90%;
height: 500px;
background: red;
position: relative;
z-index: -2;
}
Here is a link to the codepen http://codepen.io/colbydodson/pen/wcgua
Width is differently applied to relative and fixed elements, the ancestors margin and the style property that are parent-inheritable in respect to their position property.
The body tag will have it's default User Agent Style Sheet 8px margins (http://www.w3.org/TR/CSS2/sample.html),
header 90% width, being fixed, without any top, left, right or bottom value will be positioned to the nearest available place, but will inherit the original document/viewport size, making it in reality 90% wide, but positioned at the 10px 'body' margin offset.
To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit
.container being a block-level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10 px margins on the X axis)
Unwanted result:
logically header will be 20px wider than .container because position fixed moves your element out of body flow.
Fix:
control your parent (body) element default margin by setting to 0
body { margin: 0; }
Or a small but heavy CSS reset like:
/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }
Read also CSS Box Model - Margin collapsing
I was having a similar problem only on mobile. Despite having no margins, borders, padding on any of the parents, my fixed element was still wider than the viewport, and I didn't have the option of using width: auto.
If you're willing to not support IE8 and below, you can use
width: 100vw
Can I use Viewport units: vw, vh, vmin, vmax
The accepted answer is fine but in my case, I was seeing a fixed header that was wider than the rest of the page only on a mobile device. It happened to be caused by some element in the footer that had a width in pixels wider (width: 750px in my case) than the viewport of the browser.
If you want to know if some element on your page is causing this problem for you? Just open your browser console and remove some elements further down. At some point, you may notice the header becoming the correct width again. Chances are that the element you just removed or some element in it has a width in pixels wider than the viewport of the browser.
The solution, in that case, is to either set that element to a lesser width or make it flexible.
By default the body tag have margin.
Try this in your stylesheet:
body{
margin: 0;
}
As Salaw mentioned, using body { margin: 0; } will solve the issue, since <body> has default margin/padding (depending on the browser). position: fixed; removes an element completely from the flow of the document and makes it relative only to the viewport, while position: relative; does not.
Given this fact, and given that width: 90% means "make this element take up 90% of parent element's available space", and given that the parent of a fixed element is the viewport while the parent of this relative element is the body with its margin, you have the discrepancy in sizes.
See http://codepen.io/anon/pen/exzpC
Because position:fixed behave as the element is detached from document, and placed in the nearest top/left corner of the document, adding default body's margin. That's why it will take the same amount of space, as your second div, if you reset body margin.
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.