I am having the following structure of the web page.
Part 1: Header, fixed height
Part 2: Content, variable height
Part 3: Footer, fixed height
And I want the following to be true:
1) If the content is smaller than screen_height - header_height - footer_height : The footer should stick to bottom of page, giving the content all the screen space between header and footer.
2) If the content is larger than screen_height - header_height - footer_height : the page will scroll and the footer will be on the bottom of the page. (This case is already achievable, it's how all normal pages look)
To achieve first, I did the following
HTML:
<div class="page-content" style="display: table;height: 100%;width: 100%;">
<div class="header-section" style="display: table-row;height: 10px;">
Content here
</div>
<div id="content-section" style="display: table-row;height: auto;">
Content here
</div>
<div id="footer-section" style="display: table-row;height: 230px;">
Content here
</div>
</div>
With this, the header row is spanning not 10px height but more. I want to confine the header row to just 10px height. Is this achievable with this table structure? And what about cross-browser compatibility?
Thanks.
To reduce header height, add line-height:10px also.
You can add Javascript to apply height .
Please check the fiddle - https://jsfiddle.net/afelixj/c8vq3Lbu/5/
Tables try their very best to display everything in them. So since the text "content here" is higher than 10px, the top row will expand to show it all.
Possible solutions are
Take the header out of the table and put it above. Ordinary blocks handle height in a more straightforward way.
html, body {
margin: 0;
height: 100%
}
<header class="header-section" style="height:10px; overflow:hidden">
Content here
</header>
<div class="page-content" style="display:table; height:calc(100% - 10px); width:100%;">
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
Put an extra div in the table cell in the header that you give the height. If a div in a table cell is 10px high, the cell won't have to expand, even if there is content overflowing.
html, body {
margin: 0;
height: 100%
}
<div class="page-content" style="display:table; height:100%; width:100%;">
<div class="header-section" style="display:table-row; height:10px; ">
<div style="display:table-cell;">
<div style="height:10px; overflow:hidden">
Content here
</div>
</div>
</div>
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
Or, if the problem is that the content is actually 10px high, but you have a few pixels extra below it in the cell, it's probably that the content is inline and leaves room for a descender. In that case, the solution is to give the content display:block or vertical-align:top styles.
html, body {
margin: 0;
height: 100%
}
<div class="page-content" style="display:table; height:100%; width:100%;">
<div class="header-section" style="display:table-row; height:10px; ">
<div style="display:table-cell;">
<img src="http://lorempixel.com/300/10" alt="" style="display:block"/>
</div>
</div>
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
As for cross-browser compatibility, it's usually best to emulate a full table (with nested divs being table, table-row and table cell) because older browsers may have problems with content being put directly inside a table row.
You do not need a table layout for achieving this.
Just do a calc for the min-height on your main content div. That's it. Use the viewport relative unit to get the height of the viewport (screen) and subtract the fixed heights of your header and footer.
All you need is this:
.header { height: 1.5em; } /* Fixed height, any unit */
.footer { height: 200px; } /* Fixed height, any unit */
.main { min-height: calc(100vh - 1.5em - 200px); } /* Calculated min-height */
Fiddle: http://jsfiddle.net/abhitalks/jpunjng4/2/
Snippet:
(go full screen to see the effect)
* { box-sizing: border-box; padding: 0; margin: 0; }
.header { height: 1.5em; background-color: #eef; border-bottom: 1px solid #999; }
.footer { height: 200px; background-color: #efe; border-top: 1px solid #999; }
.header, .footer { overflow: hidden; padding: 4px; }
.main {
min-height: calc(100vh - 1.5em - 200px); padding: 4px;
background-color: #eee;
}
<div class="header">
Header
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
Related
I have a parent div with two other elements, one contains the text content, another may contain a picture. The picture and text might vary in size/length. I want the parent div to grow depending on the content but only up to a certain height. If there is an image I want the image to grow or shrink to make the parent div reach the max height. If there is no image, I want the parent div to shrink to contain the text. The image will be added via JavaScript. I have illustrated what I wanted to do in the following picture.
I was expecting the following code to work but the images seem to expand to be larger than the parent div. I have tried a few other things but I cannot seem to get it to work.
Here is a codepen.
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img src="MayOrMayNotContainImg.com">
</div>
</div>
#parent{
max-height:400px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
Any help would be highly appreciated, thanks in advance.
In the snippet below, if the image is there, I am assigning its height dynamically using jQuery height by calculating the remaining space inside the #parent. (200 - height). So whatever the content may be, the height of the image will increase or reduce based on that.
$(document).ready(function() {
$('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
let height = $('#text-body').outerHeight();
$('#img-wrapper').height(200 - height - 20);
})
#parent{
max-height:200px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img id='img-wrapper' src="MayOrMayNotContainImg.com">
</div>
</div>
My Problem
I'm working on website which has comments that look like Facebook's comments. The text and user's name in the comments can be edited dynamically.
I can't figure out how to break a long text correctly after the user's name.
What I've Tried
Using 'word-break: break-all' on my wrapper div.
Examples
What i'm trying to achieve:
What i get:
My Code (Simplified)
html:
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder"></div>
<div class="text"></div>
</div>
</div>
relevant css:
.text_wrapper{
word-break: break-all;
}
.space_holder{
width: /*Equals to name's width + 10px. Changes dynamically with
javascript when the name is edited. */
}
Help much appreciated!
EDITED: SOLUTION
This worked for me:
html:
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder"></div>
<div class="text"></div>
</div>
</div>
relevant css:
.text_wrapper{
word-break: break-all;
}
.space_holder{
width: /*Equals to name's width + 10px. Changes dynamically with
javascript when the name is edited. */
float: left;
}
.text{
display: inline;
}
If you add a float: left; to .space_holder you can wrap the floated name.
.text_wrapper {
word-break: break-all;
}
.space_holder {
width: 75px;
float: left;
}
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder">John Doe</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
I might just be really tired but I can't for the life of me figure out why display: inline-block isn't working to make the parent's width adjust to the size of it's contents. I've tried searching for other solutions but every resource I've found says adding inline-block to the parent should do the trick.
In the example below, I am trying to make the blue square only extend to the edge of the green square, and then ultimately center the contents via margin: 0 auto;:
#intro {
height: 400px;
background-color: red;
}
.slide-txt {
display: inline-block;
width: 30%;
background-color: lime;
}
.slide-box {
display: inline-block;
margin: 0 auto;
background-color: blue;
}
<section id="intro" class="image-slider">
<div class="container" id="intro-slide">
<div class="slide-box">
<img src="http://www.jkoffset.com/assets/images/Packaging1.jpg" alt="same-box-slide" width="150px">
<div class="slide-txt">
<h1 class="title">Headline <span>Goes Here</span></h1>
<div class="caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn" href="#">
Learn More
</a>
</div>
</div>
</div>
</div>
</section>
https://jsfiddle.net/eam0mk47/
Using width:30%; in the div child (.slide-txt) will make the parent div expand to fill the other 70%, so to avoid that and make it adjust according to content you need to use px instead of % in the div child.
In that red #intro is a div with the class .container ... this element has padding left and right via bootstrap.
Just remove that padding:
https://jsfiddle.net/eam0mk47/1/
#intro .container {
padding: 0px;
}
Or don't use that class there.
I have a simple page where the all the content (<h1>, <h2>, <p>, etc.) is contained within a <div>, in order to have the same width.
I like the way the body text looks and want to keep it that way, but I'd like to add a background image to the heading. It should start from the very top of the page (and window, in my case) and end at the baseline of the last line of the heading itself, while also extending in width from the left side of the window to its right. In the following image I illustrated the desired layout. Below it, I've drawn the html hierarchy that I've attempted.
In fact, I've already tried creating a child of <h1> with
width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);
but:
Since the page has z-index: -1;, for some weird bug I can't click on links with relative positioning
I'd prefer not to use vw unites because of browser support.
I still can't manage to extend the background to the top.
The font size of <h1> and its margins are defined in pixels, as you see, but the page still behaves dynamically because as I resize the window, the number of lines of <h1> increases.
HTML
<div class="page">
<h1>Heading</h1>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
body {
height: 100%;
width: 100%;
margin:0px;
}
.page {
font-size: 20px;
width: 90%;
max-width: 70ch;
padding: 50px 5%;
margin: auto;
z-index: -1;
}
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
margin-bottom: 26px;
}
p {margin-bottom: 24px;}
JS Fiddle
Two suggestions:
Separate the h1 and the rest of the body in two different divs. Apply the background to the first div.
<div class="background-here">
<div class="page">
<h1>Heading</h1>
</div>
</div>
<div class="page">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Or you could just apply the background to the body and use background-repeat: repeat-x or bakcground-size: cover. But it depends on how the image was designed.
I would like to preface this with I'm a complete newb, so keep that in mind. So what I'm trying to do is have a main content area and I want that a specific width, lets say 800px. And to the left and right of it I want just a black border. Now I want it so when someone resizes the page the two borders change width to fill the entire window but my main content box stays the same. Couldn't figure it out. thanks for the help!
Try this:
<html>
<head>
<style>
html {height:100%;}
body {background-color:#000000;height:100%;margin:0px;padding:0px;}
#content{background-color:#FFFFFF;width:800px;margin:auto;height:100%;}
</style>
</head>
<body>
<div id="content">content</div>
</body>
</html>
If this is your HTML code:
<div id="outer-container">
<div id="main-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
you could set the CSS to the following and it should work.
<style type="text/css">
#outer-container {
background-color: black;
height: 200px;
}
#main-content {
background-color: white;
width: 800px;
margin: 0 auto 0 auto;
height: 200px;
}
</style>