I am a bootstrap newbie. I am trying to create a layout with full width and height. I need to have two divs, one as the header and the bottom one will have the content to fill the entire space below the header.
What is the best approach to accomplish this?
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
I need to create a full height divider without breaking Bootstrap CSS grid layout because I might need to make the right column to be wrapped and go after the left column for some screen sizes.
Here is an image which shows the issue:
And here is a Bootply sandbox to play with.
My question differs from other questions about making the column 100% high. Although I have implemented the divider as a border of the right column, this is not mandatory - I don't care about the height of the right column, it might be left as it is, and the divider could as well be a separate HTML element. I need only the divider to be 100% high and not entire column.
Is there any way to create this red vertical divider while keeping Bootstrap grid layout intact to preserve responsive design?
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
Perhaps I'm the last developer to ask this but I don't get it:
I'm considering using a fixed width layout such as this one:
http://www.gridsystemgenerator.com/gs02.php
Based on the screen size the left and right columns resize dynamically while the middle grid stays fixed. Great!
Now what I don't understand is that there are ton of websites out that use this approach but they also have page sections which have borders and background images that fill the complete screen width.
An example:
http://www.gridsystemgenerator.com/gs02.php
The top strip, tab menu and footer sections have lines that extend out over the full screen width.
How do they do this?
Pavlo, thanks for the tip!
So it turns out that there are container divs which are width 100 and float left which can contain design elements across the whole page width. Then the fixed grid divs are embedded into the container divs.
:)
I'm trying to build a 3 column layout that has one fixed column on the left, a fluid column in the middle and another fixed column on the right.
Anyone seen this?
There are similar problems here, but not the solution I was looking for.
CSS Layout 2-Column fixed-fluid
http://www.dynamicdrive.com/style/layouts/category/C13/
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
Yes?
Use fixed width and float to the appropriate side on the left and right columns. Then set the right and left margins of the fluid div to the width of the fixed divs. Fluid div should follow the fixed ones in the html.