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.
Related
Please find my code here: https://jsfiddle.net/5jv8m5xf/
The code above consists of a fixed header and a content.
I want that the fixed header and the content have the same relative width (%). Therefore, I put width: 80%; for both of them. However, as you can see in the JSFiddle the fixed header has a bigger width than the content.
When I put a fixed width (px) for example width: 500px; for both of them they have exactly the same width. However, I want them to have the same relative width (%) to make the layout responsive.
What do I have to change in my code to achieve this?
Default browser styles add 8px of margin to the <body> element.
Those are offsetting your .content, but won't effect the .header, because it's fixed.
Add this to align your elements:
body {
margin: 0;
}
How do you fill the height when the website is zoomed 100%? When zoomed out i don't want the element to keep filling the screen. To be more clear, when a user enters the website and the website is zoomed by the default 100% the whole screen should be filled with a color. But when the user scrolls down or zooms the fill should not dynamically change its height.
From comments i edit the code to get a better result, but now there is gaps around the element:
header.mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
First, you're setting the position: fixed of the .mainHeader class. This causes the element to always be at the same position in the viewport, regardless of zoom-level or scrolling position.
Remove this position: fixed, and its corresponding top and left properties.
You're currently setting the height to 100% of its parent element, so it would always be as big as that.
To set the height using the viewport's (visible page area) height, you can use vh units, equivalent to percentage of the viewport height (vh) - likewise for width and vw.
So, to set the height of the element to 100% of the viewport height, you can simply do:
height: 100vh;
EDIT - NOTE: the vh unit isn't supported by all browsers (I've found some, trust me). So I would recommend setting a fallback value, above the vh one, to prevent incompatibility. For example:
height: 500px; // fallback value if browser doesn't support vh
height: 100vh; // this value overrides the above one, if the browser supports vh
You might then need to remove padding and/or margin from the body or other elements, if you're seeing whitespace around the element. Have a play about to get the right effect.
For example:
body {
padding: 0;
margin: 0;
... other properties
}
Please find a JSFiddle of this in action: https://jsfiddle.net/s49p6Laj/
Sample code:
HTML
<div class="header">
I fill the viewport!
</div>
<div class="other-stuff">
// All your other content here...
</div>
CSS
// Set the body's margin and padding to 0
body {
margin: 0;
padding: 0;
}
// Make the container fill the viewport
.header{
width: 100%;
height: 100vh;
So I am trying to make banners which scroll with the page, but always will be like 40px left from my wrapper.
This is my site: http://joostmeijer.eu/ so you can see how my html works.
I seriously don't get how I can make the banner div fixed but relative to my wrapper.
You can create a <div> inside your wrapper div, for example <div id="fixedwrapper"></div>, and then style it like this:
div#fixedwrapper {
display: block;
width: 140px;
height: 500px;
position: fixed;
left: 0px;
background: black;
}
Here's a live example: jsFiddle Demo. Although you will need to use the CSS3 #media-queries to remove the banner when the window size is reduced since your website isn't responsive and the banner will overlap your content once the window size is reduced.
You are contradicting yourself in the question. If a div has a fixed position it will position relative to the browser screen, so it will never ever move.
Solution:
If you do not want to change your html and keep the banner inside the div, you can apply a negative margin. Make sure the overflow on your wrapper is set on visible (default value) for this to work. Also make the image wider to fill up the gap you will create on the right by adding the pixels from the negative margin to your #banner div's width.
#banner{
background-color: blue;
height: 100px;
width: 540px; /*40px added to compensate for margin*/
margin-left: -40px; /*move the dic 40 px to the left from the div*/
}
Here it is in JSFiddle.
Is this what you are trying to do???
I'm trying to get an image centered on the screen, and I want it to stretch horizontally.
The trick here is that I need set margins. Lets use 200px as an example.
The image needs to stretch horizontally (and possibly scale proportionally) to maintain those margins no matter the windows size.
I can center it, and I can stretch it, but I can't do both at once for some reason.
Also, this needs to be CSS only! No JS.
Any help is greatly appreciated! :D
P.S. I've seen ton of questions about scaling images with the window size, and this is not the same thing. I need set margins, in pixels, that stay constant, while the image between them stretches horizontally.
I put a container around my image which would preserve the margins. As the window's width changes, the margin stays intact - only the width of the .container is changed. By setting the width of the image within the container to equal 100%, the entire image would be scaled (proportionally) based on the width of the container:
CSS:
.container {
margin: 0 200px;
background: red;
}
.container img {
width: 100%;
}
HTML:
<div class="container">
<img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
You could use two divs, the outer with the set margins, the inner with width set to 100%:
http://jsfiddle.net/tqmrY/4/
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
One way you could do this is by putting your image in a div and then putting padding on the div.
You would set your img to have a width of 100% and auto height, and then put padding on the containing div.
Here is an example
http://jsfiddle.net/uJnmf/
I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}