I am trying to give a div a dynamic height depending on screen size. In the div I have a calendar that has multiple lines of content, that can be shown or not (user's choice), e.i. the calendar's height is not fixed. With that in mind I have div's height set to auto. Which works fine (the height is set according to number of lines in calendar).
The problem arises when I make the browser's height smaller than the amount of height that calendar needs. It becomes a scroll which is not a problem, the position of the scroll is. The scroll is placed on the entire div not on the calendar in the div. The scroll is correct, if the div does not have it's height set, but it does not dynamically shrink to fit only the content (it stays the same height no mater if there is content of not) and I am trying to avoid that.
I suppose the solution is to say that if the div has enough space to use auto and if not it should have the height of it's parent. The min does not take parameters such as auto. I am a bit lost as to how to write code correctly to achieve this preferably using only CSS.
EDIT:
html:
<html>
<body>
<div class = "calendar">
<div class = "content">
<\div>
<\div>
<\body>
<\html>
CSS:
body {height: 100vh; overflow: hidden}
. calendar {overflow-y: auto;}
. content {height: auto;} \\the problem
The height of calendar in JS is set to "parent"
Well, by your answer I am sure you want to make the content responsive. So there is an easy trick or you can say a cheat sheet for your requirement.
Step 1: Include Bootstrap 4 CDN scripts
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
Step 2: In your HTML, write a classname as 'form-group' to adjust your calendar's height content as per the screen size.
<div class="form-group">
<div class = "calendar">
<div class = "content">
<\div>
<\div>
</div>
Step 3: Run your project and see how your width of the container adjusts according to the browser when you drag or make it small.
Hope this helps.
Related
I have a header pic which is made up of a Vuetify carousel.
The section container for the carousel is 100vh and the v-carousel element height is set to be 100%.
I would expect that setting a min-height of 300px on the section element would prevent the carousel pic from having a height smaller than 300px. Instead, while decreasing the screen height, I notice a line marking the min-height but the pic inside becomes smaller as I reduce the height of the screen. Below there is my code, can someone suggest what I am doing wrong? I see from the inspection tool that the v-carousel-item is a div with a background-image and I wonder if this affects somehow my code.
<template>
<div class="home router-view">
<section style="height:100vh;
background-size:cover;
background-attachment:fixed;
background-position:center;
position:relative;
max-height:1300px;
min-height: 400px">
<v-carousel
cycle
hide-controls
hide-delimiters
style="position:absolute;top:0;width:100%;height:100%"
>
<v-carousel-item
:src="require('#/assets/images/picture.jpg')"
>
</v-carousel-item>
I am confused by your styling. Are you trying to make the cover the whole page (100vh), all the time? Then you don't need min-height or anything.
Anyways, try adding min-height:100% inside v-carousel's styling to force height.
If it doesn't work, please see v-carousel's props and try add height="100%" natively provided by vuetify.
see: https://vuetifyjs.com/en/api/v-carousel/#props
If you provided a reproduction, codepen etc. your problem would be much clearer to understand.
Please let me know if it works!
I can see quite a lot of articles online about how to create sticky headers (ie. when the user scrolls the page, the header stays in place at the top of the window). However they all seem to imply that the header should be of a fixed height?
This is unacceptable for me. For a very simple example, on certain dates like July 4 I might want to put a USA flag in the header - which will slightly increase the height.
So how can I make a header, say all contained within a <div class="header"> ... </div> area, sticky - regardless of the height of the div?
Sorry to be late to the party, but this can be done without any Javascript at all. This may be aesthetically unpleasing, an offense against god and man, but it does work! The trick is to put precisely the same content in two div's:
<div id="fbanner">Here's your banner content</div>
<div id="banner">Here's your banner content</div>
<div id="restofpage">Here's the stuff on the rest of your page</div>
Then provide some CSS:
#fbanner {
position: fixed;
width: 100%;
}
#banner {
visibility: hidden;
}
So, no matter what the content is, even if it's text that line-wraps in a narrow viewport, both div's will be the same height, and the hidden one will take up the space needed to keep the rest of the page content from disappearing under the banner until you scroll.
You might find that you have to do some tinkering with margins, but that's a small price to pay if you want to avoid yet another jQuery "solution."
You have to use jquery for this. jquery get the height of the header dynamically and put the padding top on bellow the heard div.
For example
HTML
<html>
<head>test</head>
<body>
<header>
<div class="example"> Test</div>
</header>
<div class="sample-content">
Test Content Test Content Test Content Test Content Test Content
</div>
CSS
header{width:100%; position:fixed;}
JQUERY
<script>
$(window).load(function(){
// this gets dynamic height of your header
var sticky_header = $('header').height();
// apply tha dynamic height to your div after header for margin-top so it not covered by sticky header
$('.sample-content').css('margin-top', sticky_header + 'px' );
});
</script>
I have a header that is not a fixed pixel height - depending on what the other department decides to put in the banner in the content management system, the height of the header will change.
So I did just as #MisterNeutron answer suggested and created a 2nd header (invisible) but my header is pretty Massive, so instead of duplicating the html I just clone the header DOM element with Javascript.
var visibleHeader = document.querySelector('.fixed-top').cloneNode(true);
var invisibleHeader = document.querySelector('.fixed-top');
invisibleHeader.style.visibility = 'hidden';//take up space, but be hidden.
invisibleHeader.style.position = 'relative';//un-fix
document.querySelector('body').insertBefore(visibleHeader, invisibleHeader);
The header it's self is directly inside the body so the html ends up looking like this:
<body>
<div class="fixed-top">
... rest of header html ...
</div>
<div class="fixed-top" style="visibility: hidden; position: relative;">
... rest of header html ...
</div>
... rest of page goes here ...
</body>
Note that if you have any elements with Id's in the header, this will create 2 of the element with same ID, but if you make sure the Real header is Above, I believe when you query for it, it will always grab the one you want.
I'm building an android app with phonegap using angularJS + topcoat. I managed creating the index page, views and all the basic structure. My question is, there is some pages(partials) that doesn't have data to show. In that case, the view does not fill the height of the page. That makes a problem because I have a drawer menu hidden usin angular-snap. Because the page doesn't fill all the available height, the menu that is supposed to be hidden is visible. Does anybody know how to handle this situation? I'm attaching a image to examplify! app-example
Thank you!
Why don't use the css min-height property. Assume every page of your app is wrapped inside a div as follow :
<div classs="page">
//your page content
...
</div>
You can then create the following CSS rule
.page {
min-height :100%;
}
that will ensure that even if the height of your content is less than the total height of your screen it will occupy 100% of the page's height.
I managed solving the problem with Nicolas help. It didn't worked in the beginning because I was setting the new style on the partial's div. After trying for a while I set the class on the "main" div which holds the ng-view directive and it worked. Just an example in case others have the same issue:
<body ng-controller="MainCtrl">
<div snap-content snap-options="snapOpts" class="page">
<div ng-view ng-class="slide"></div>
</div>
</body>
.page {
min-height :100%;
background:inherit;
}
Note: I had to set a background for the page class otherwise it won't work.
following situation:
<body>
<div style="position:fixed; width:100%">[place holder for header]</div>
<div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>
I need the header always visible and at the top, so this one should be with position:fixed.
A problem occurs after self adjustments of the header - height. If the header is higher than 100px a part of the content is hidden.
How can I (CSS) dynamically set the start position of the content div regarding the end of the header.
I'm still looking for a CSS only solution, but for the moment here's an idea using just one line of JavaScript – when using jQuery:
JavaScript
$(document).ready(function () {
$('#content').css('marginTop', $('#header').outerHeight(true) );
});
HTML
<body>
<div id="header" style="[…]">[place holder for header]</div>
<div id="content" style="[…]">[content]</div>
</body>
The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header.
CSS only solution (although not super clean) could be to display the same block twice: 1st block "position: fixed", 2nd block "visibility: hidden". Since both would have the same height, the role for the 2nd block would be to push down the page content to the appropriate level.
I am trying out Products.Carousel. I created a Carousel for my homepage,and added two Banners, which rotate automatically after n seconds.
Problem is I am supposed to set the width and height in the Carousel settings, or leave those values blank to use the ones for the first banner.
What I wished is that the carousel used the same width for the main content area. I tried to set a fixed value, but of course it won't work in different resolutions (the banners might invade the right portlet area, or might be too short for the main content width).
Any ideas on how I can work this around?
You should be able to give the Carousel a variable width by overriding Products.Carousel.viewlet (either in filesystem code or in portal_view_customizations). You'll probably want to base the Carousel width on the width of another element, like the #content div:
<div tal:condition="view/available"
tal:attributes="id view/element_id;"
class="carousel">
<tal:banners tal:define="banners view/banners;"
tal:condition="banners"
tal:content="structure banners">
Banners
</tal:banners>
<tal:pager tal:define="pager view/pager;"
tal:condition="pager"
tal:content="structure pager">
Pager
</tal:pager>
<script type="text/javascript" charset="utf-8" tal:content="string:
(function ($$) {
$$('#${view/element_id}').ploneCarousel({
height: ${view/height},
width: $$('#content').width(),
transition: '${view/transition}',
speed: ${view/speed},
delay: ${view/delay}
});
})(jQuery);
">
</script>
</div>
I don't have an answer, only ideas.
can you set a class on the banner area that will set its width the same as the main content area?
can you use a % width?
or the evil, but successful, method I've used:
flash banner using swfobject.js