on my website (using zenphoto and boostrap 3), I have an issue on my div.main class.
http://test.vincentbourganel.fr
I have static navbar and a fixed footer on the bottom.
I want the div.main have "a height of 100% of the rest of the remaing place".
It doesn't work when my content don't take all the remaing height.
See this page as example :
http://test.vincentbourganel.fr/page/contact/
Can you help me to slove this issue
Not sure how you feel about this solution and I'm more a back end developer than front end guy but you could always do something like
calc(100vh - (HEIGHT_OF_HEADER + BORDER) - (HEIGHT_OF_FOOTER + BORDER)
Only thing I don't like about this solution is I can't think of a way to do it without hard coding the heights in there. I'm sure there's a way to grab it but for now this should get you going in the right direction.
You can get it by using flex, I created a box class and assigned flex as a property, then use flex:1 0 0 to content part, I used position to footer to stay in bottam, and assigned overflow:auto to content part div.
below i posted a working example to understanding
Flex - Flex Guide
Working Fiddle
body {
margin: 0px;
padding: 0px;
}
.box {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
.header {
background: tomato;
}
.content {
flex: 1 0 0;
background: green;
overflow: auto;
}
.footer {
background: blue;
position: relative;
}
<div class="box">
<div class="header">
Header
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam
mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam
alias dicta, excepturi quod sed delectus veniam?<br><br>
</div>
<div class="footer">
Footer
</div>
</div>
you can use following code to adjust the height of main div. It will display on full screen if the content is less.
.main{
min-height: 100vh;
}
I found a way to do what I want in my js file.
My JS code fix min-height of my main div to fill the screen even if main content is small one.
this code is working fine to suit my need :
jQuery(document).ready(function() {
// full height for main div (windows height - "header" height - "footer" height)
$(window).resize(function() {
$('#main').css('min-height', $(window).height() - $('#menu').outerHeight() - $('#footer').outerHeight());
}).resize();
});
You can see it in action there :
http://test.vincentbourganel.fr/
Related
I am using bootstrap V4 and need for a customized paragraph a line-height of 1.
But I am not able to overright the bootstrap setting of ~1.5.
<p class="ptime"><f:format.date format="H:i:s">{play.plDate}</f:format.date></p>
<p class='dur'>{play.Duration}</p>
p.ptime {
line-height:normal !important;
}
p.dur {
font-size: 80%;
text-align: right;
vertical-align: text-bottom;
padding: 0px;
margin: 0px;
line-height:normal !important;
}
I tried also 1, 1em for the line-height, but I am not able to reduce the space between the paragraphs (lines).
What I have to do?
In default, bootstrap adds a 16px margin at the bottom for every paragraph. So if you need to remove the space between those two paragraphs, you have to remove that bottom margin instead of reducing line-height using css.
From all the paragraphs,
p {
margin-bottom: 0 !important;
}
From only those two paragraphs (ptime & dur in your case)
.ptime, .dur {
margin-bottom: 0 !important;
}
See below working example. I used bootstrap 4.6.0.
p {
margin-bottom: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p class="ptime">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, ullam inventore! Officiis, quam facilis iste unde sapiente doloribus ad fugit quaerat nam natus, vero, ab totam! Provident perferendis nemo excepturi?
</p>
<p class='dur'>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. At asperiores quas adipisci voluptas fuga dolore explicabo dolor labore delectus a incidunt dolorem accusamus beatae eveniet, quae, impedit excepturi ut sequi.
</p>
I have many sections on my page. Every of these sections can have similar elements, for example in each of these sections can be h1 element.
I want to add css files where every of these css will be for only one section.
For example I have three sections on my page where ids are:
section1 -- section2 -- section3
I have three css files too with names:
section1.css -- section2.css -- section3.css
How to do that every css file refers to a suitable section?
Maybe can I add any additional block to every of these css files with section id?
I don't know why you want to do that, but if you want to have separate styles for each section which has unique ID just use the ID as a selector. For example:
section1.css
#section1 h1{ color:red;}
#section1 .someclass { color: blue}
section2.css
#section2 h1 { color: green;}
#section2 .someclass {color:yellow;}
And so on. You will have separate styles for each section selecting them by ID. I think it's the easiest way
CSS files doesn't refer to its elements (in your case id). Its the selector which actually targets elements. You can use separate for each of the children on each section.
Instead use inheritance with each id.
Have a look at the example snippet below:
/* Section 1 */
#section1 {
background: #ff0;
padding: 10px 15px;
}
#section1 p {
background: #99d;
}
/* Section 2 */
#section2 {
background: #99d;
padding: 10px 15px;
}
#section2 p {
background: #ae9;
}
/* Section 3 */
#section3 {
background: #ae9;
padding: 10px 15px;
}
#section3 p {
background: #ff0;
}
body {
margin: 0;
}
<div id="section1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
<div id="section3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p>
</div>
Hope this helps!
I have a block with visible text and hidden. After hidden text became visible, main block will change size. What is the proper way to animate this re-sizing? Is it possible to use pure css solution for this?
.wrapper{
padding: 10px}
.common{
border: 1px solid #ccc;
width: 300px;
margin: 0 auto;
padding: 10px;
-moz-transition: max-height 2s;
}
p.foo{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="common">
<button onclick="$('p.foo').toggle()">Click me</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magnam nulla ex aperiam, unde id ea amet tenetur magni harum quibusdam nihil ipsam sed natus excepturi impedit iure sapiente molestias repudiandae a iusto possimus, modi, molestiae saepe ab! Obcaecati odit deserunt alias consectetur perspiciatis, possimus</p>
</div>
</div>
size of block part with hidden text is always the same and can be known
size of block part with visible is unknown
you can't animate with display: none; to display: block; but you can animate a height value if you know the new height target value already - you can set the hidden element to 0 with overflow: hidden; so nothing of the hidden element will be seen before the click element and if you prefer to make the animate with CSS3 so you can use a new class for the new height value and use the .toggleClass() JQuery function.
i recommend you not to use it as an inline...
HTML & JQuery:
<button onclick="$('p.foo').toggleClass('show')">Click me</button>
CSS:
p.foo
{
height: 0;
overflow: hidden;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
p.foo.show
{
height: 144px;
}
fiddle: http://jsfiddle.net/coyxhprp/
I have below code. Weave is
http://liveweave.com/JVtNIk
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS is
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
Please help me understand the reason why the box2 content is not starting from the top but quite from below ? is there any specific reason for that ? I can solve it by adding float but i am just curious on this behavior.
Please someone help me understand.
Thanks in advance
You have this behavior because the baseline of the .box1 is its last line of text. The .box2 starts on the same line as this last line so that explain why it is quite at the bottom. Then the inline attribute makes it continuing under the .box1 like if .box2 was in a <p> tag.
Hope you understood my explaination.
So basically, I have this structure (sample) :
<div class="container">
<div class="header">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odio pariatur numquam aspernatur ex iste praesentium. Aliquid quo voluptas eaque sequi autem voluptatem alias ullam provident tempora adipisci optio error!
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit esse assumenda eligendi obcaecati quas sapiente voluptatum a enim quam officia aliquid exercitationem earum at sint harum ullam nostrum distinctio! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit esse assumenda eligendi obcaecati quas sapiente voluptatum a enim quam officia aliquid exercitationem earum at sint harum ullam nostrum distinctio!
</div>
</div>
And this stylesheet :
.container {
height: 100px;
}
.header {
background-color: blue;
}
.content {
background-color: green;
overflow-y: auto;
}
I would like to apply an overflow: auto on the .content as its content overflows the container height, however this simply does not work (see in this fiddle). I can apply an overflow: auto to .container and it will work but I don't want to apply the scroll on the .header element.
Furthermore, the .header height may change, so I can't set a fixed height to .content.
Any idea/suggestion ?
Thanks :)
EDIT : To clarify, I set a height to the container, I cant set a height to neither .header (which may change but won't be bigger than .container) nor .content (which may overlap the .container height because of .header)
You won't be able to do this in CSS unfortunately, but with little javascript it will work.
var container = document.querySelector(".container");
var header = document.querySelector(".header");
var content = document.querySelector(".content");
content.style.height = (container.offsetHeight - header.offsetHeight) + "px";
http://jsfiddle.net/q26cL/3/
It's because you don't have a height. So the div expands accordingly to the content.
I set a height of 120px for .content and it works now.
.content {
height: 120px;
}