The Css goes like this:
#mylog{
background-color: white;
border-style: solid;
border-color: rgb(154,154,154);
overflow: auto;
width: 100%;
height: 100%;
}
as soon as I put the 'overflow: auto;' the width gets reduced. I have no clue why one tag would overcome the other. Please help.
When the box height of your #mylog element is overflowed, your overflow:auto declaration will in force the browser to generate a vertical scrollbar which will use some pixels of the available width.
If you don't want the available width to change when overflowing, you should use overflow:scroll and in that way, your scroll bar will be all ways there and your available width wont be changed.
Related
I have a fixed div in my page, as you know if the height of the div is higher than the viewport of the browser you end up with a div you cant scroll since is the background that scroll and not the div (fixed to position).
So lets say:
<div class="fixed">
</div>
.fixed {
position: fixed;
border: 1px solid #000;
width: 200px;
background-color: green;
}
You can check here http://jsfiddle.net/n7b43s8a/1/ if you reduce the preview page height you see you cant scroll the div.
The bootstrap modal fix this issue, but I dont quite understand how they do it, seems the take away the scroll of the body and add a new spacer background div but is not clear.
Here's an example http://jsfiddle.net/RLQhh/750/
You see, even with a very small height you can scroll the div.
How they do it?
The key is overflow. Add overflow: hidden to body, and overflow: auto to your .fixed.
Of course, this assumes that your fixed container is somehow limited in height, as it will by default stretch to its contents height.
See http://jsfiddle.net/456vashr/ for an example
In the Bootstrap example; they used position:relative for their fixed div. You need to change your position:fixed to position:relative.
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???
The container is an popup, so it must be block and absolute. It has a max-height and it can contain a table as my example:
http://jsfiddle.net/3rsaLcwe
.container
{
display: block;
position: absolute;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
If table's height > it's height, only vertical scroll-bar is appeared but we must hide horizontal scroll-bar. However, the vertical-scroll-bar cover on table. Please help me to fix this problem. Note that the table's width is dynamic, horizontal scroll-bar must be hidden and vertical scroll-bar not cover on table. Thanks.
If i understood correctly what you mean, the scrollbar covers the table.
just add a padding to the container:
padding-right:10px;
I am trying to set font size, family and line-height on a div. I then need to know the correct height of the div for some layout stuff. However, the height I am getting is wrong, and a scrollbar is appearing on the div's parent for probably the same reason. The following jsfiddle best illustrates my problem:
http://jsfiddle.net/JYkAX/19/
Here is the html:
<div class="separator">
<div class="PleaseNoScrollBar">
Some Text Here
</div>
</div>
Here is the css:
.separator
{
background: gray;
display: block;
overflow: auto;
}
.PleaseNoScrollBar
{
font-family: cursive;
background: lightgray;
line-height: 32px;
font-size: 32px;
display: block;
opacity: 0.5;
vertical-align: top;
}
The following jquery retrieves the outer height of the div (but its incorrect).
alert($(".PleaseNoScrollBar").outerHeight());
Any ideas on what is causing this? Unfortunately, I need to be able to retrieve the actual outer height of the div, I can't just make the parent div larger.
I should mention, the scrollbar only appears in Chrome and IE. In firefox the div is scrollable by dragging the mouse, but no scrollbar appears.
You are viewing a scrollbar cause you set overflow:auto; on .separator. Just remove it and you won't have scrollbars anymore.
As for the height, the alert function retrieves "32" which is, I think, the correct height of the div.
Remove the overflow:auto declaration from the container div.
.separator
{
background: gray;
display: block;
overflow: auto;
}
from the w3c spec...
overflow: auto The behavior of the 'auto' value is user agent-dependent, but
should cause a scrolling mechanism to be provided for overflowing
boxes.
source: http://www.w3.org/TR/CSS21/visufx.html#overflow
this means that the folks that coded the browser determine how overflow:auto works. If you set the height of the . separator div to 34px, the scrollbar goes away.
I would recommend removing the overflow:auto from the .separator div.
Check out this: http://jsfiddle.net/JYkAX/26/
If the height of the container div is set to anything less than two pixels greater than the child elements height, the scrollbar shows up. My guess is that the browser adds the 1px border that is added to both the top and bottom when an "overfow auto" is declared.
I have had similar issue, while using font from Google Fonts and it had implicitly set line-height of 1.5em, which the jQuery probably did not see. Once I explicitly wrote line-height:1.5em to my CSS reset (or website font setting), it was OK.
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.