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;
}
Related
I am working in a Nuxt app and using CSS based smooth scrolling to anchor links. The smooth scroll itself works but the scroll-margin property is achieving nothing... it is seemingly completely ignored. The exact same code works fine outside of the Nuxt app so I wonder whether it is something to do with Nuxt.
Slimmed down version of the code is as follows and I have also created a (working) non-Nuxt codepen to show the code in action outside of Nuxt.
For the sake of clarity, I want to use CSS only to achieve smooth scrolling with a scroll margin in Nuxt. I do not want to use JavaScript or built in Vue / Nuxt features. If I have to I will but, at the very least, I'd like to know why scroll-margin is not doing anything.
HTML
<main>
<header>Fixed header</header>
<section>Click this link to scroll to a section further down the page and show the targeted state. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section id="scroll-section"> <strong class="show-on-target">Check out the space between this block and the header 👆 The block is clear of the header thanks to the <code>scroll-margin</code> property. The block was blue before you clicked the link and this text wasn't here either.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
</main>
SCSS
* {
box-sizing: border-box;
font-family: helvetica;
margin-inline: 0;
line-height:1.5;
}
html {
scroll-behavior: smooth;
}
header {
position: fixed;
display: grid;
place-content: center;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 3rem;
background: #ed6a5a;
font-size: 1.5rem;
}
section {
background: #9bc1bc;
padding: 50px 30px;
&:nth-child(2n) {
background: #f4f1bb;
}
&:first-of-type {
padding-block-start: 20vh;
}
}
strong {
font-size: 1.2em;
}
code {
font-family: monospace;
}
:target {
scroll-margin: 5rem;
background: #F2D7EE;
.show-on-target {
display: block;
margin-block-end: 20px;
}
}
.show-on-target {
display: none;
}
What I tried:
Using the code above to create a CSS-only smooth-scroll including a scroll-margin. I also tried tweaking the code above to use section, [id], section[id] and #myAnchor in place of :target but to no avail.
What I was expecting:
Page to scroll smoothly to the anchor leaving a 5 rem margin above it.
What actually happens:
Page scrolls smoothly to the anchor but with no margin above it
I have a resizable container, I want it to be able to be resized to fit the content inside, but not too large to waste space.
I got the code like
.container {
width: 200px;
height: 200px;
background: red;
resize: vertical;
overflow: hidden;
max-height: max-content;
}
.content {
background: yellow;
}
<div class="container">
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, molestiae? Officiis consequatur quod minima cum at ratione, sint ipsum architecto! Sit accusantium tenetur ducimus aut atque, eligendi in ullam sunt! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Maxime explicabo dolor sequi veritatis aut. Recusandae quibusdam maiores doloremque natus, aspernatur minus dignissimos, id soluta amet, blanditiis illum odio ab alias.
</div>
</div>
I try different value of max-height, only fixed value such as 300px works, but it is not what I want. The requirement is that the red space can not be there, like the attachment. Any idea?
Try height: fit-content;
**UPDATE**
At first I didn't understand what you were trying to achieve, but now I'm pretty sure what you need here.
Unfortunately, I think that this is impossible without javascript (I may be wrong).
So here is simple example with ResizeObserver that looks for container and if this element height exceeds content height it will be shrinked back to max height of content.
disconnecting observer before change of height and reconnecting back after this change is mandatory because change of height will trigger ResizeObserver and we will got and infinite loop.
According to this issue, best workaround to prevent logging massive amount of errors into console, is to reconnect observer via requestAnimationFrame
const container = document.querySelector('.container');
const content = container.querySelector('.content');
const resizeObserver = new ResizeObserver(event => {
const maxHeight = window.getComputedStyle(content).height.replace('px', '');
const containerHeight = event[0].contentRect.height;
resizeObserver.disconnect();
if (containerHeight > maxHeight) {
container.style.height = maxHeight + 'px';
}
requestAnimationFrame(() => resizeObserver.observe(container));
});
resizeObserver.observe(container);
.container {
width: 200px;
height: 200px;
background: red;
resize: vertical;
overflow: hidden;
max-height: max-content;
height: fit-content;
}
.content {
background: yellow;
}
<div class="container">
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, molestiae? Officiis consequatur quod minima cum at ratione, sint ipsum architecto! Sit accusantium tenetur ducimus aut atque, eligendi in ullam sunt! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Maxime explicabo dolor sequi veritatis aut. Recusandae quibusdam maiores doloremque natus, aspernatur minus dignissimos, id soluta amet, blanditiis illum odio ab alias.
</div>
</div>
I made a change to use JavaScript to set the max-height on the container with the offset set height from the content. That way it will not grow more than the content.
<div id="container" class="container">
<div id="content" class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, molestiae? Officiis consequatur quod minima cum at ratione, sint ipsum architecto! Sit accusantium tenetur ducimus aut atque, eligendi in ullam sunt! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Maxime explicabo dolor sequi veritatis aut. Recusandae quibusdam maiores doloremque natus, aspernatur minus dignissimos, id soluta amet, blanditiis illum odio ab alias.
</div>
</div>
<script>
var content = document.getElementById("content");
var container = document.getElementById("container");
container.style.maxHeight = content.offsetHeight + "px";
</script>
I have this css and its working fine the text appears at right and is aligned.
However the same code of that fiddle in a pdf, the text is apeparing like this (like the example at right, at left is how it should display):
Do you know what can be the issue?
.container {
display: flex;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
You can solve this problem by using text-align
.container {
display: flex;
text-align: justify;
text-justify: inter-word;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
#mehran text-justify:inter-word; is not a valid CSS property
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
.content {
width: 200px;
height: 150px;
padding: 20px;
background: yellow;
overflow: scroll;
box-sizing: border-box;
}
http://jsfiddle.net/v6yjLdnp/
Why doesn't the padding-bottom work in this case when scrolling? And how do I make this possible?
I suppose you mean the padding at the bottom of the scrolled content. This seems to be a browser issue - see the comments. But with the following code it should work properly in all browsers.
Transfer some of the settings to the container, then it works as desired:
body {
margin: 0;
}
.container {
width: 200px;
height: 150px;
overflow: scroll;
}
.content {
padding: 20px;
background: yellow;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
The problem is probably be caused by the scroll bars.
This is a workaround with using pseudo elements in css, but it might solve your problem:
.content::after { content: ''; display: block; width: 100%; height: 20px; }
EDIT: Remove the padding bottom of the content element to make it work in all browsers:
.content { padding-bottom: 0px; }
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/