I am trying to create a background that auto adjusts in height as I add content.
If there is no content, the background should cover the entire screen, 100vh. As I add content the background should adjust in height until it reaches its minimum height of 100px. I have included an image to show demo what I am trying to achieve.
I have tried using min/max/100%/auto height properties and cant seem to find a solution.
I am using vue 3, typescript and css in my project.
Can someone please help me?
Using flexbox would give you exactly what you are asking for. In a nut shell what is happening is the parent container is using display flex which causes the children use flexbox properties. The .background div then has flex-grow : 1 which pretty much says grow as much as you can to fill the container. That means it will grow to fill the left over space of the parent depending on how much text there is.
.flex-container {
display: flex;
height: 100vh;
flex-direction: column;
}
.background {
background-color: blue;
flex-grow: 1;
}
<div class="flex-container">
<div class="background">
<h1>my background div</h1>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
finibus, odio vel scelerisque convallis, leo odio scelerisque urna, ut
scelerisque elit urna id quam. Etiam tempus pretium erat a semper.
Mauris consequat scelerisque ante id volutpat. Suspendisse convallis,
ipsum ut vehicula vehicula, lorem mauris porttitor enim, sollicitudin
ultrices lectus sem et ipsum. Morbi feugiat, lorem at viverra mattis,
neque enim vehicula turpis, blandit luctus eros eros ut arcu. Praesent
facilisis pharetra consectetur. Maecenas sagittis commodo felis, vitae
tristique risus. Phasellus fermentum varius turpis vel rhoncus. Nullam
aliquet nec risus non interdum. Sed nec magna pellentesque, facilisis
felis ac, cursus leo. Fusce et tortor magna. Fusce odio eros, varius non
placerat mattis, ullamcorper sed purus.
</div>
</div>
You can use your text container to hide the background underneath.
.container {
border: solid 1px grey;
background-color: red;
position: relative;
height: 250px;
}
.text {
position: absolute;
bottom: 0;
background-color: white;
width: 100%;
}
<div class="container">
<div class="text">
<p>Here is some text <br /> on multiple <br /> lines.</p>
</div>
</div>
Related
Totally new to HTML/CSS. I've got the top image/logo done, and the header. How do i get that text formatted like in the picture (3 columns)?
I only tried using table with 3 columns. However i think its harder to style it considering its a table. Like max column width/height etc.
Thanks in advance!
Click for the image
perhaps the easiest way to do this is with the css columns attribute:
div{
column-count:3;
column-gap:100px;
}
<div>this is some random text we want to enter into our html page
</div>
but the better way to do this is with flex
#container{
display:flex;
justify-content:space-between;
}
<div id = 'container'>
<div class='cols'>this is some text</div>
<div class='cols'>we want to add</div>
<div class='cols'>to our html page</div>
</div>
if you want to add a header and a footer you can try:
#container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#cols{
display:flex;
justify-content:space-between;
width:100%;
}
<div id='container'>
<div id = "header">my Header</div>
<div id='cols'>
<div>some random</div>
<div> we want to add</div>
<div>to out html page</div>
</div>
<div id ='footer'>my Footer</div>
</div>
For the three text sections, you need three child divisions in one parent division.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Style it this way:
.parent{
display: block;
width: 100%;
margin: 0px auto;
text-align: center;
}
.child{
display: inline-block;
width: 30%;
height: auto;
margin: 0px auto;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#media only screen and (max-width: 768px) {
.child{
width: 100%;
}
}
The media query is there to make the divisions stack on one another on mobile screens.
Simply input this style
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
And put this code below your image code,
<div class="column">
<p>It occurs in a wide range in sub-Saharan Africa</p>
</div>
<div class="column">
<p>The Indian subcontinent to Southeast and East Asia..</p>
</div>
<div class="column">
<p>The leopard is one of the five extant </p>
</div>
I would suggest that you stay semantically correct and not use DIV tags for everything under the sun. The text in question is paragraph text thus deserves to be in a P tag.
This works for the three-column part of your question. It has the advantage of being correct semantic use of HTML tags, and using CSS to produce table-like formatting without needing to commit the sin of actually using a table like we used to do back in the 90s.
Edit: one other note. You will find that the CSS float property has its uses. However, as you use it, you will also find that overuse of it can complicate the heck out of your layout and cause you to starting pulling hair out in the end. The display table type properties are what I prefer after some years of front end work in my not-so-distant past.
<html>
<head>
<style type="text/css">
.row {
display: table-row;
}
.cell{
display: table-cell;
vertical-align: top;
width: 33.33%;
}
</style>
</head>
<body>
<div class="row">
<p class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus blandit neque dapibus volutpat. Donec et dapibus leo. Ut at sodales magna, quis varius lacus. Ut sapien enim, fermentum eu egestas sed, pretium vel dolor. Nullam congue odio ut sem volutpat, ac dictum mi mattis. Quisque in purus sollicitudin nisl dapibus bibendum a a quam. Sed tristique augue nisi, quis interdum odio aliquet in. Aliquam tristique, dolor sed suscipit lobortis, eros enim mattis purus, vitae consectetur ante est nec libero. Aenean semper, ipsum eget venenatis eleifend, erat erat dignissim mi, non lacinia justo lorem at tortor. Aenean et erat suscipit velit porta placerat nec sit amet augue. Nulla non sem non tellus pellentesque ornare. Vivamus volutpat eget lacus eu dignissim. Sed venenatis euismod tempus. </p>
<p class="cell">Integer euismod felis et elit dapibus laoreet. Pellentesque et massa vitae orci pharetra imperdiet. Proin ultricies velit erat, a semper arcu volutpat eu. Morbi feugiat sapien non nisi faucibus elementum. Curabitur sed justo et enim maximus tempus. Donec posuere gravida justo sit amet dignissim. Etiam vestibulum mauris eros, vitae blandit justo pellentesque nec. Ut varius mattis volutpat. </p>
<p class="cell">Nulla vulputate ipsum leo, ut ornare massa malesuada et. Donec metus enim, viverra id diam a, luctus sagittis turpis. Etiam euismod, ex id convallis tristique, odio tellus placerat nunc, in dapibus risus massa non nulla. In placerat lectus tortor, vel gravida leo pharetra eget. Donec mollis facilisis pharetra. Nulla commodo quam tellus, eget hendrerit nisi aliquet id. Duis sagittis enim eu sodales bibendum. Maecenas tincidunt id mauris vitae ultricies. </pclass="inline">
</div>
</body>
</html>
Ok, CSS gurus. Here's an easy one for you. I want to have a sidebar to the left of my main content area. I'd like the sidebar to take up 30% of the screen and the content to take up 70%. However, I'd like the sidebar area to take up 100% of the available height. I have
<div id="main">
<div id="side">
<%= render "layouts/sidebar" %>
</div>
<div id="contentArea"><%= yield %></div>
</div>
I thought setting the parent DIV to have "display:flex;" would make everything right ...
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
height: 100%;
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
but right now, the height of my sidebar is only equal to the content that's in it. How do I make it 100% of everything?
In your structure ‘main’ is parent div, that’s mean if you set ‘100% of everything’ to child div ‘side’ and this div not position absolute or fixed, ‘main’ get 100% too.
So, you can use relative lengths, like height: 100vh.
jsfiddle
But you can set to side div position fixed: it will help when you get scroll in contentArea, but side div all time will in left side with height 100vh.
jsfiddle
Tip: if you use flex, you can manipulate without float (e.g. justify-content
). Check it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is that you specified a height of 100% on #side. Ironically, this actually prevents the column from taking up the full vertical space, as it caps to at the height of the container. Because #main doesn't have a specified height, setting height: 100% on #side will constrain it to the height of the content (text) within.
Simply removing this causes the column to expand to take up the full vertical space:
#main {
display: flex;
width: 100%;
background-color: green;
}
#side {
background-color: #e0e0e0;
width: 30%;
display: inline-block;
float: left;
/*height: 100%;*/
}
#contentArea {
text-align: center;
width: 70%;
display: inline-block;
}
<div id="main">
<div id="side">
Side
</div>
<div id="contentArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut interdum quam. Integer nec tincidunt erat, in scelerisque turpis. Pellentesque interdum turpis eu ante gravida, a auctor lacus pulvinar. Maecenas elementum massa ac felis gravida lobortis
vitae eget nisi. Donec erat turpis, condimentum et ipsum in, tincidunt fringilla quam. Nam est dui, porttitor eget nisl sit amet, mollis varius dui. Suspendisse dui mauris, tincidunt vitae blandit ac, consectetur sed ex. Sed bibendum felis ex, id
euismod odio euismod ac. Praesent viverra arcu quis arcu condimentum, eget varius elit suscipit. Donec tempus, justo vel iaculis vehicula, risus magna varius ex, vitae mattis elit turpis ac magna. Fusce porta tempus erat vel ultricies. Suspendisse
vel erat blandit, semper dui sed, consequat urna. Pellentesque ultrices pellentesque feugiat. Donec sit amet turpis in orci accumsan blandit. In tincidunt erat sed tristique sagittis. Duis ultrices lacus quis vestibulum venenatis. Maecenas et risus
quam. Quisque semper purus id mauris gravida dictum. Cras tellus augue, sollicitudin ac maximus eget, porta elementum elit. Fusce vulputate consectetur dapibus. Praesent semper augue lacus, vel laoreet tellus ultricies fermentum. Phasellus vestibulum
fringilla purus ut malesuada.
</div>
</div>
Hope this helps! :)
Use: #side{height: 100vh;} (vh = viewport height), and remove display flex so you can have unequal height for each div.
Link to jsfiddle https://jsfiddle.net/gcoh62o6/5/
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
What I would like to reach is the following design:
Two text blocks with some gaps inbetween aligned around the page midline (see the picture).
I tried to play around with float property, using margin and padding to get the gap, but I can't get them centered.
EDIT:
I forgot to indicate that the arrows show the resizable parts: so, the page width must be resizeable whereas the text itself isn't, but the text is dynamic content and can change from page to page, so there is no way to just define constant width for it in pixels.
You could do it like this
<div id="wrapper"> <!-- wrapper will be in the middle of the page -->
<div id="box1"></div> <!-- Your First Box -->
<div id="box2"></div> <!-- Second Box -->
</div>
#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */
Use display: table with margin: 0 auto for centered block and display: table-cell with percentage padding for its children. Set percentage width for centered block if needed.
Something like this?
HTML:
<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>
CSS:
body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}
For the left block, set the left margin to auto. For the right block, set the right. Like this:
#leftBlock {
margin-left: auto;
}
#rightBlock {
margin-right: auto;
}
This puts them back to back in the center of the screen.
To add space in between the blocks, set the other margin to some defined amount:
#leftBlock {
margin-left: auto;
margin-right: 5%;
}
#rightBlock {
margin-right: auto;
margin-left: 5%;
}