I use VS2010, C#, ASP.NET; I read some data from SQL server and fill my DIV, I don't want to give this DIV a fixed height or scroll bar, rather I want it to have its height automatically set to maximum data, what should I do? how should I set my styles?
also I have another horizontal DIV that should be displayed at the bottom of page, how can I set it so that it is always fixed to bottom of page (not bottom of screen)?
a good example is the Related questions column in this site! and the gray horizontal DIV at the bottom of page
thanks
The default behavior of divs is to contain all their data. If they are not, then you are overriding that behavior somewhere, either by setting an explicit height, or by having content items that are taken out of the normal flow (floats or absolutely positioned items).
Related
I'm trying to layout my small React project.
Here's the link to codesandbox: https://codesandbox.io/s/szkola-reacta-44-kalkulator-wydatkow-rvh5t?file=/src/styles.css
What I want to achieve is login page, which will (after login) show expenses and incomes. I want to content below header to occupy the whole remaining space, but the whole page shouldn't be scrollable. I've tried two approaches:
Firstly I've set width of 100vh to an App component, then I've set .main to 100%, to occupy the rest of remaining space after setting up the header. I've found out that it'll set 100vh as well, so it'll be scrollable and I don't want it to be.
Secondly I've made a header fixed, but then my whole form isn't centered, because header isn't in the document flow.
I prefere to find solution for the first approach, in the second one I know I can calc it somehow (but I need guidance), however the first one looks more straightforward for me, but I'm missing something.
In general, no matter how, but I want to have a header, which will be always in the same place, a dynamically changing content which will occupy remaining space and the whole app should occupy 100vh to prevent from scrolling.
I'm having some trouble with the current layout of my polymer site, specifically with regards to nested components and their associated scrollbars. I'll preface this by stating that by absolutely no means am I a CSS guru. I wish I was because I probably wouldn't be struggling with this as much as I am. Also feel free to jump straight to the jsbin URL as my issue may become apparent.
The situation:
I currently have a nested core-scaffold element, whose main content often requires vertical scrolling and thus it's vertical scrollbar becomes active as required. However, as it is nested, it's container(s) can also have scrollbars enabled. Ideally, I'd like a single scrollbar on the highest level element which can scroll the scaffold's content to it's full vertical extents, yet also cause the topbar to slide away as it does now when scrolling down. I've also noticed that the height of the scaffold's main content is determined by the first page that is loaded into it. Subsequent page loads with different heights does not cause the scrollbar height extents to change accordingly.
Please note that I've simply inserted an iframe loading external content into the scaffold's content section for the purpose of this jsbin demo. My actual site loads a bunch of data driven collapsible height containers within the content pages, wrapping horizontally as needed. Due to their collapsibility, their containing page therefore has a dynamic height. That height can vary from page to page as container heights within them vary.
Here is the jsbin. Whoever can remove me from this css hell will be considered my hero...
http://jsbin.com/muniqi/1/
In my initial jsbin sample code, you'll notice I have specified core-pages height as '100vh' the top level polymer element (i.e. my-app-element). The second level polymer element (i.e. my-scaffold-page-element), loads within the aforementioned core-pages. Therefore, the nested scaffold element's maximum height is 100vh. Further down the chain, when the scaffold-element's main content area's height flows past its host's height limitation, it caused a secondary 'inner' scrollbar to appear, which has a different vertical extent than the original outer scrollbar...so trying to use the outer scrollbar alone doesn't effectively scroll the inner content to its entire vertical extent, forcing you to use the inner scrollbar as well to get the job done. Ugly to say the least.
Now that I know that is the case, one way to reduce the likelihood of an inner scrollbar appearing for the nested scaffold element's main content area is to change it's parent element's core-pages height to something much greater than 100vh (400vh?). Doing so solves the problem in a roundabout way. The outer scrollbar can now be used to scroll the entire vertical extent of the nested scaffold's contents without an inner scrollbar occurring.
In the new jsbin example (below), you can witness the 'fix', which also happens to remove the reliance on core-scaffold, instead preferring to utilize its individual components in a more configurable fashion.
http://jsbin.com/muniqi/3/
This is more a question of logic rather than technical.
I have a design where my header is fixed at the top all the time, so is the footer, but the elements inside have percentage widths so the header will change in size as the window changes.
BUT, as the header is always fixed-positioned the content below is covered by it and as I do not know the height of the header I cannot know how much padding-top I must add to the content so it won't get covered by the header.
What do you say?
If height goes automatically, you will need js to control it, taking the height of the fixed div and updating top margin/padding dinamically. Anyway, it would be nice if we could see an example of what you have currently
I have a main container div, where all the important content of the site is inserted, 800px wide, centered horizontally.
I need to put multiple absolute positioned divs layered below it (via z-index) and outside its width, without causing extra scrollbars to appear, and without losing the main container scrollbars (so puting overflow:hidden in a wraper won't do).
In other words, I was wondering if it's possible to create divs with different elements inside (videos, images, or text) that could be treated as backgrounds, so that the scrollbars would only appear when the window resizes below the 800px wide (width of the main container), and the rest of the divs would just bleed out (something similar to what swffit causes with an embebed flash movie).
Is there any way to do this via css or javascript?
Thanks in advance!
There is a way that requires CSS only. I once faced similar problem with this web site I created, take a look at the source. The curves by the side are done this way.
Trick is to change positioning of main container to relative with no shift - that causes change of coordinates base, here is a link. Than use absolute positioning of the "background divs" to get them outside the main box.
To solve the overflow problem use some extra div wrapper (in my site with id graphic). To specify its width use a range - min-width equal to main box and max-width as total width including the "backgound divs". And to this wrapper set the hidden overflow.
Hope it helps.
How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.