I'd really appreciate a hand getting my fixed-header table scrolling in IE7.
In IE7, my tall data table is forcing its containing DIV to expand vertically, and preventing that DIV's scrollbar from showing. I'm using the excellent cross-browser (including IE7) scrolling, fixed-headers table layout solution from:
http://www.sitepoint.com/forums/showthread.php?t=615364&page=3
, but I've modified it so that the table fills the page.
Here's how that looks in-practice:
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#results { position: absolute; top: 2em; bottom: 0; width: 100%; }
#results div { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; }
#results table { width: 100%; }
#results table th p { position: absolute; top: -2em; }
</style>
<body>
<div id='results'> <!-- provides position referece to headers -->
<div> <!-- scrolls the table it contains -->
<table> <!-- incorrectly expands parent div in IE7 -->
<tr><th><p>FIXED-HEADER HERE</p></th></tr>
<tr><td>TALL CONTENT HERE</td></tr>
</table>
</div>
</div>
</body>
I'm happy with how the headers and scrolling work in FF and IE8. Debug kit in IE7 shows that #results has the desired height, but both DIV and TABLE share the same extremely tall value, where DIV should actually be the height of #results. If I change DIV height from % to px units, it scrolls, but of course no longer resizes properly.
I'm using strict doctype. My table actually contains tabular data, typically 10 columns and 200 rows, so a table is semantically accurate. There's actually more content around this table of course.
I'd prefer not to use javascript for dynamic dimensions, unless it is so simple that it's bulletproof, since I always end up with stupid defects (oh, yeah, I didn't think to re-evaluate size when you hover over hyperlinks and the line height changes, etc.).
Thank you,
Shannon
By wrapping DIV (while keeping existing style rules) in a:
<div style="position: absolute; height: 100%; width: 100%;" } ></div>
the issue is resolved. IE7 internals strike again. There is probably a more elegant way to solve it that doesn't require more structural markup, I'd love to hear it if you know of it.
Shannon
Related
I have a wide image that's wider than the typical browser window. I'd like to contain it in a scrollable DIV (or some other container) that scrolls independently of the main window scrolling.
I've got close with this fiddle.
body {
padding: 20px;
font-family: Helvetica;
}
.scroll_box {
background-color: #586;
color: #000;
overflow-x: scroll;
/* this almost works but breaks the
layout of the parent elements. */
right: 0;
left: 0;
position: absolute;
}
.scrollable_img {}
<table class="wrapper" border=1>
<tr>
<td>
<div class="scroll_box">
<img class="scrollable_img" src="" width=2048 height=16\>
</div>
</td>
</tr>
</table>
But as you can see the layout of the scrollable container is set to absolute which breaks the layout of the table that it's contained within. Also the page body padding is ignored.
So, how do I achieve this whilst..
Keeping relative layout so that the parents are all size correctly and body padding is observed.
Avoiding javascript, this needs to be embedded in a wiki system that doesn't allow javascript.
Dynamically resizing the scrollable container to the window size.
If possible the solution should be able to deal with images of unknown size.
Many thanks to anyone who can figure this out!
If I get it right, adding a wrapper to the table with the following styles
position: relative;
width: 100%;
will do the job, I have edited your fiddle here
EDIT: A better attempt can be found here. Additional actions:
Removed position: absolute from .scroll_box
Added the following rules at table element:
table-layout: fixed;
width: 100%;
Removed the previously added wrapper and its style because it is not needed after the above modifications, as it seems.
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
This seems to be the most perplexing issue of all time, at least for me. Knowing that this page, aside from the header is broken - I have copied the HTML and tried to carefully remove the WordPress related jazz so you get the html of the page.
JsBin Live Page
What I want you to focus on is the footer sitting in the middle of the page. I remove position:absolute and it sort of moves down.... It needs to stay at the bottom of the page.
This is position:fixed this is the only way it stay at the bottom, but see how the footer follows you? I don't want that.
You might say, do min-height: 100% That is not what I want either because then the container, row and column classes that have height of 100% do not work.
What I am trying to accomplish is: this type of layout. But as you can see the footer rides up...
Yes I have tried position:relative as well: check out position:Relative
So as you can see The Live page I linked you too, from everythin gI read on the internet is the right way to achieve this type of layout., How ever I must be doing something wrong ...
Update 1
Before you suggest I am missing divs, I have validated through a div checker for all of MY example and the divs are correct. I am not missing any divs. This is a pure css issue
Before you mark this a duplicate of x, y and z - I have provided three examples of the positions I have tried and none of them has worked:
position:absolute
position:relative
position:fixed - Not what I want. The footer MUST stay at the bottom of the page.
Finally, as stated min-height: 100% on the wrapper (or any other element) is not acceptable as an answer unless you can specify how I can achieve this type of layout.
The way i usually do this, is to add position: relative to html and position: absolute to the footer itself.
The main disadvantage that you have to set margin-bottom=footer-height for the body
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
See the result https://jsfiddle.net/jy0gsgm4/
Removing height:100% from wrapper stops the spacing below the footer.
This is happening because the total height is the 100% wrapper and the height of the navbar. I would suggest putting the navbar into the wrapper div.
I'm a fan of this method.
display: inline-block;
Pretty self explanatory. HTML (Demo)
<div class="verycoolwrapper">
<!-- tons of cool stuff on page -->
<footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>
</div><!-- // end wrapper -->
CSS: (Demo)
.verycoolwrapper {
width: 960px;
background: pink;
margin: 0 auto;
position: relative; // child elements relative to this, no height needed
}
#footerstay {
// your styles
width: 100%;
height: 150px;
background: #ccc;
display: inline-block;
}
Also, alternately; clear float should work for you.
I'm trying to do a fluid design, so the images will resize down, when browser windows is resized.
I used max-width, and that worked well for Chrome, Safari and opera, but in IE and FireFox it does not work (the images are shown with their full size, which is much bigger than width of page itself).
I know some people might tell me to use just width: 100%; but that resizes small images to size of parent element, which is not ok.
Does somebody have any solution to this? It has to be pure HTML & CSS, no JS.
img {
max-width: 100%;
height: auto;
line-height: 0;
border: 0;
}
The image is basically in Table thats inside of a div, thats inside of a div.
Not actual code (but simplified version of how it is), as it would take a lot more space:
<div class="blabla">
<div class="blablabla" style="max-width: 1110px;">
<table><tr>
<td> Text, random, ladida, text
<img src="random_source.lol"/></td>
</tr></table>
</div>
</div>
The thing is, I wan't all images to scale down if needed, not only some.
Thanks.
Ps.: I already googled a lot and red topics here without success.
Your code works just fine across browsers.
See this demo: http://jsfiddle.net/abhitalks/mxmzjnaL/1
Problem is with your table. Give your table and/or td some size and a table-layout:fixed; to your table.
See this: http://jsfiddle.net/abhitalks/mxmzjnaL/2
Relevant CSS:
table {
table-layout: fixed;
width: 50%;
}
td {
width: 100%;
}
img {
max-width: 100%;
height: auto;
line-height: 0;
border: 0;
}
Note: Use percent units for the width of table to keep it fluid.
.
I've been banging my head against the wall really hard for the past couple of hours to figure out a way to achieve the layout I'd like for a webapp. And my head hurts.
Basically what I need is to have a full window layout (full width, full height, no scrolling - ever). 100% of width and height should be covered using two different horizontal boxes (you can see them as rows).
The height of the first box/row can be variable (see it as a header for the page)
The one below should occupy what's left of the space, without ever going further than 100% of the window, hence without ever showing a scrollbar.
Now what's a bit more tricky is that within the second box/row, I want content to be displayed with an inner vertical scrolling. Imagine the second box/row contains a list of items, in case of very few items, the bottom part of the box/row should stop right after the content. In case of many items, the box/row should expand right until it hits 100% of the window height (which is basically 100% of the windows - the height occupied by the first box/row). The rest of the content should be visible through scrolling within the second box/row.
Am I making any sense?
Regarding the code, I'm not going to copy/paste the desastrous thing I've pulled together because I'd rather start from a blank page.
This is what I tried:
<html>
<body>
<div id="wrapper">
<div class="box">Header</div>
<div class="box">Content <ul><li>...</li>(x1000)</ul></div>
</div>
</body>
</html>
The reason why I use a "box" class is because both boxes/rows should show the same appearence in terms of backgrounds, margins, shadows, etc.
html, body {
height: 100%;
}
#wrapper {
position: absolute;
height: 100%;
width: 100%;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
For the rest, I've just tried (and failed so far) to manipulate the .box elements by adding hazardously overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%; etc.
Thanks in advance for your help!
The problem is because CSS has long been crappy about auto-adjusting height to available space.
The solution is to use a wrapper that's set to position: absolute and tied to the top, left, right, and bottom edges of the viewport. With this, the browser will auto adjust the height of the element, and if you have a content div inside with height: 100% it'll always fill that space.
Setting overflow-y: scroll on the wrapper will allow the content to scroll if it becomes too long:
http://codepen.io/helion3/pen/jwbcx
Site headers are usually not variable in height. If you're defining the site header using percentages, and if you don't need to support IE<8 then you can use percentages safely with box-sizing: border-box to achieve the same.
I believe this should do the trick.
If you adjust the height of .header make it is equal to the top: position of .content
CSS:
html, body {
margin: 0;
}
.header {
height: 150px;
background: #0080ff; // (Unnecessary, this is set to help you see the header div)
}
.content {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background: #ff8000; // (Unnecessary, this is set to help you see the content div)
}
HTML:
<body>
<div id="wrapper">
<div class="box header">Header</div>
<div class="box content">Content</div>
</div>
</body>
Maybe you want something like this? I replaced class="box" with ids, but it should work.
Consider following things:
No need to have the "absolute" positioned div (#wrapper in your example)
Create 2 box div same like you have created in your example (.box)
Second box should have "overflow:auto" style property
Calculate the height of header and full display area's height with javascript
Calculate the remaining height and assign this value as height, min-height and max-height for the second box. That's it.
You can check the solution here:
http://webnflash.com/temp/occupyAvailableHeight.htm