I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
Related
I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root element's styling.
I basically have a layout where the page/screen/window should not have a scroll, but the inner body of the table widget should, when there are enough elements that go beyond the expected area of the table.
Basically I have a top content on the page, and a table widget. The table widget is to take up the rest of the space of the screen. The table has a title and a header. The body is to take up the rest of the table space and to have a scroll when it has elements that go beyond that space.
I have searched many resources over stack-overflow and tried many things. I will provide the current state of the layout in the pen. Here you can see all that I think is my best try.
https://codepen.io/anon/pen/KLogbJ
The central area of interest is the .body element. Based on things I've read I have styled it:
.body {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 0.5rem;
min-height: 0;
}
I would appreciate any help on this.
You could add overflow: scroll; to .body and give the .item a min-height
Also give your .table a max-height: 100%;
See this fiddle
The problem is that the contents of the area you want to scroll is set to scale to fit it's container. For the internal scroll you are looking for you would need to have:
A set height for the container so it won't expand to fit the content (in this case you want it to be 100% of the screen)
The content must not scale in height to fit it's container. It has to maintain it's height so that it remain larger than it's container.
If you have those 2 conditions you should find the scroll bars appear.
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
I'm building a portfolio in indexhibit where all pages of images use a a horizontal div to scroll through the images.
I didn't like the way the images were reduced in quality and wanted them to appear as large as the visitors screen would allow (without it going over), so I made them responsive (height: 90%; width: auto;).
The trouble is: the horizontal container div has a width that is the size of all of the original images (as per the indexhibit formatting is built to) - leaving a large white space to the right of all the images. This is because the images are downsized to fit the screen responsively - so I guess if you had a big enough screen size these images would actually
If I make the container div width: auto, it obviously splits the images onto the next line.
Is there something I can do with CSS to solve this issue - I'm not confident going in and modifying core files with this cms.
Thanks
Mike Chalmers
I played around with the way the images were displaying and inline-block solved it. The container needs some changes to get it to display horizontally. Here's the basic code:
#img-container {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
.img-div {
display: inline-block;
}
I'm trying to stack 2 divs of variable height one on top of the other. Both divs combined should not exceed the container height. The 2nd div should allow scrolling if it gets too big.
I've done some research on how to make a div take the remaining height and it pointed me towards display: table-row. I can't use absolute positioning because I don't know what the height of the 1st div will be as it is also variable.
The problem appears to be that the table will always expand vertically with the content unless I use a fixed height on one of the divs.
Here's a JSBin of the problem: http://jsbin.com/heyam/3/edit?html,css,output
It works fine in Chrome but doesn't work in any other browser. I've read dozens of threads on SO with similar problems but none of the answers gave me a working solution. My browser support includes the latest versions of FF, Chrome, Safari and IE9+.
Is there a CSS-only solution to this problem or am I stuck using JS on this one?
.slideout {
display: table;
float:right;
width: 200px;
height: 100%;
background: blue;
}
i have a div on a web page that basically acts as a panel container. i want it to:
have a minimum width of 1000px; So no matter how small the content inside the div is, it will at least keep the panel to 1000px in width:
in terms of max width, it should keep going as big as the content within it. So if a person has a 24 inch monitor and they want to maximize the browser it should keep growing until the content inside doesn't have any scroll bars and then stop.
needs to work in all browsers.
how would i do this in css?
Assuming this item is a block element (i.e. "display: block"), it should scale automatically as wide as its containing element (in this case the browser window).
In CSS, just specify "min-width: 1000px." This will work in IE8+ and all modern browsers.
try this
#panel {
min-width: 1000px;
diplay: block;
overflow: hidden; }
Try this:
#panel
{
/* Other styles */
min-width:1000px;
/*width:100%; - removed as it will create horizontal scrollbar if margin and padding aren't 0 as per Josh's comment.*/
}
However, you will problems with older browsers like IE6 which do not like the min-width thingy in which case you will need to use JavaScript.