I am having difficulty trying to get Google Charts to adjust to the changes in page width when the scroll bar appears in Google Chrome. I am displaying this data in the Google Sheets sidebar (I believe has a width of 300px). The chart always goes to the outside of the parent div and ignores the right inner margin. When the scroll bar appears due to a longer page, the image should also adjust to maintain the proper right margin. I would like the right margin to be the same as the left. For text this seems to work fine, but not for images such as charts.
This image is the current output. The picture should have the same margin on the right as it does on the left. If the image is too wide, it should ideally adjust it's width to stay inside its container.
I have created the problem below using an image instead of a Google chart for simpler code.
Code.gs
function onOpen() {
SpreadsheetApp.getUi().createMenu("My Menu")
.addItem("My Item", "showForm")
.addToUi();
}
function include (filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function showForm() {
var htmlWidget = HtmlService.createTemplateFromFile('Form');
SpreadsheetApp.getUi().showSidebar(htmlWidget.evaluate().setTitle("My Form"));
}
Form.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Form-CSS'); ?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {'title':'How Much Pizza I Ate Last Night', 'width':'100%'};
var chart = new google.visualization.PieChart(document.getElementById('mychart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="wrap-collapsible">
<input id="collapsible1" class="toggle" type="checkbox">
<label for="collapsible1" class="lbl-toggle">Button 1</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
</div>
</div>
</div>
<div class="wrap-collapsible">
<input id="collapsible2" class="toggle" type="checkbox">
<label for="collapsible2" class="lbl-toggle">Button 2</label>
<div class="collapsible-content">
<div class="content-inner">
<div id="mychart" style="width: auto; max-width: 100%;"></div>
</div>
</div>
</div>
</body>
</html>
Form-CSS:
<style>
#import url('https://fonts.googleapis.com/css2?family='Roboto'&display=swap');
body {
background-color: white;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.wrap-collapsible {
margin-bottom: 8px;
}
input[type='checkbox'] {
display: none;
}
.lbl-toggle {
display: block;
font-weight: bold;
font-family: 'Roboto', sans-serif;
font-size: 18px;
text-align: left;
padding: 5px 10px 5px;
color: black;
background: coral;
cursor: pointer;
border: 1px solid black;
transition: 0.2s ease-out;
}
.lbl-toggle::before {
content: '\25B6';
color: black;
font-weight: bold;
font-size: 12px;
float: right;
margin-top: 7px;
margin-left: 0px;
transition: transform 0.2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg);
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 300vh;
}
.collapsible-content .content-inner {
background: bisque;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 5px;
}
</style>
If you inspect the element, it is inside a div with a max width of 272. You have 2 ways to fix this:
You can either set it manually width="272" or you can use the code below which will automatically adjust the width of the picture.
Try:
<div >
<img src="https://www.w3schools.com/html/pic_trulli.jpg" style="
width: auto;
max-width: 100%;
overflow: hidden;">
</div>
Result:
Note: I have updated the code, I added overflow: hidden;
For more information: CSS: Overflow
Reduce the width in
<img src="https://www.w3schools.com/html/pic_trulli.jpg" width="300">
The above because the sidebar witdh is 300, so you have to substract the margin and padding
What i am trying to do is line up 3 div tags beside eachother. All the 3 divs include anchor tags, headers and < p > tags. But when i use the style related to the div "float: left" the button becomes unclickable, as well as any css style as "class:hover" wont interact with it.
When i keep the float css style, it remains it desired looks. but interactively it is not up to the desired result.
When i drop the style float, the interaction is as desired, but the looks becomes far from what the desired result is, which is to line them up centered next to eachother.
I have tried to remove all styles one by one which could cause the problem with the anchor tag, but only the float-left seems to cause issues
here is the related html code.
.button {
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
display: inline-block;
background: none;
border: 2px solid #f1b24a;
border-radius: 8px;
letter-spacing: 2px;
padding: 0.85em 2.75em 0.85em 2.75em;
color: #FFF !important;
text-transform: uppercase;
text-decoration: none;
text-align: center;
}
<div style="float: left; margin-bottom: 15px;">
<header>
<h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
</header>
<p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
</p>
More
</div>
<div style="float: left; margin-bottom: 15px; margin-left: 65px;">
<header>
<h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
</header>
<p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
</p>
<a onmouseover="colorSwitch()" href="Index.html" class="button">More</a>
</div>
<div style="float: left; margin-bottom: 15px; margin-left: 60px;">
<header>
<h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
</header>
<p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
</p>
More
</div>
I created the code you are trying to do this way, I hope it helped (I used Flexbox instead of float)
HTML Code
<div class="container">
<div class="div1">
<header>
<h2 >Heading</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
</p>
More
</div>
<div class="div2">
<header>
<h2 >Heading</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
</p>
More
</div>
<div class="div3">
<header>
<h2 >Heading</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
</p>
More
</div>
CSS Code
.container{
display: flex;
justify-content: center;
align-items: center;
}
.container div{
margin: 15px;
}
.container div h2{
font-weight: bold;
color: #f1b24a ;
}
.container div p{
color: #f1b24a;
}
.container div a{
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
display: inline-block;
background: none;
border: 2px solid #f1b24a;
border-radius: 8px;
letter-spacing: 2px;
padding: 0.85em 2.75em 0.85em 2.75em;
color: rgb(177, 187, 44) !important;
text-transform: uppercase;
text-decoration: none;
text-align: center;
}
I have a pure CSS menu that is causing me some issues mostly on small screens/mobile devices.
Issue 1
When the menu is open the background is still scrollable. I would like the focus to be on the menu, and therefore the background would not scroll when the menu is open.
Issue 2
On a small screen the menu items are collapsed by default and expand once clicked on to show submenu. If one or two are expanded and the content goes beyond the devices window there is no way to scroll down to see the content outside of the current window view. If the menu is expanded it needs to be scrollable.
I experimented with the overflow property but can't fix the issue. hoping someone know how. Thanks!
body {
margin: 0;
font-family: serif;
background-color: #f4f4f4;
}
html {
color: #222;
font-size: 1.2em;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ==========================================================================
Global Header
========================================================================== */
.global-nav {
/*overflow: hidden;*/
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 28px 0 0 0;
}
.header {
background-color: #fff;
margin: 0 auto;
width: 1170px;
z-index: 3;
clear: both;
}
.header div.menu {
overflow: hidden;
background-color: #fff;
padding: 20px 0 0 0;
-webkit-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
-moz-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
box-shadow: 0px 3px 3px 0px rgba(136,136,136,1);
z-index: 99999999;
}
.header img {
vertical-align: baseline;
}
.header div.menu ul.menu-links {
margin: 0;
padding: 0;
list-style: none;
}
.menu-col-one {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-two {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-three {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-four {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-five {
display: none;
}
.header div.menu ul.menu-links li a {
display: block;
padding: 20px 0 0 0;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
width: 100%;
position: fixed;
left: 0;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
padding: 31px 32px 25px 0;
position: relative;
}
.header .menu-icon .navicon {
background: #00539D;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
background: #00539D;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 12px;
}
.header .menu-icon .navicon:after {
top: -12px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 100%;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.ac-container {
width: 1170px;
margin: 40px auto 30px auto;
text-align: left;
}
.ac-container article {
overflow: visible;
padding-right: 30px;
}
.ac-container input {
display: none;
}
.ac-container label {
position: relative;
z-index: 20;
display: block;
cursor: pointer;
font-size: 25px;
}
#media only screen and (max-width: 1169px) {
.header {
margin: 0 2%;
width: 96%;
padding-right: 0;
}
.ac-container {
width: 96%;
padding: 0 2%;
}
}
#media only screen and (max-width: 970px) {
.global-nav {
padding: 14px 0 0 0;
}
.header .menu-icon {
padding: 31px 1% 25px 0;
}
.header-content-right {
display: none;
}
.header div.menu {
margin-top: 0px;
}
.header div.menu ul.menu-links {
margin: 0;
}
.menu-col-one {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-left: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-two {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-three {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-four {
width: 100%;
margin-right: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-five {
width: 100%;
margin-right: 0%;
display: block;
}
.header div.menu ul li.list-header {
display: block !important;
}
.header div.menu ul li.list-item {
display: none;
}
.ac-container label {
font-size: 16px;
color: #636c76;
font-weight: bold;
letter-spacing: 0.2px;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
color: #454545;
}
.ac-container input + label:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: -6px;
}
.ac-container article {
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
max-height: 0;
font-size: 14px;
}
.ac-container article a {
color: #636c76;
}
.ac-container article p {
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container article ul li {
padding: 10px 0;
}
.ac-container article ul li span {
display: none;
}
.ac-container input:checked ~ article {
-webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
max-height: 500px;/*added*/
}
}
<!-- [Start] Header Section-->
<section class="global-nav" role="region" aria-label="globalnav">
<header class="header" role="banner">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<div class="menu">
<section class="ac-container">
<div class="menu-col-one">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">DD 1</label>
<article class="ac-small">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-two">
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">DD 2</label>
<article class="ac-medium">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-three">
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">DD 3</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-four">
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">DD 4</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-five">
<div class="btn-group">
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</div>
</div>
</section>
</div>
</header>
</section>
<!-- [End] Header Section-->
<!-- [Start] Main Content -->
<main role="main">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<!-- [End] Main Content -->
</main>
Quick answer:
Add overflow: auto on the main and .menu
Add height: 100% to html, body, main.
Add max-height: 100% to .menu
Made header smaller by 17px and only displayed box-shadow on the bottom. You'll have to override this for mobile devices where the scrollbar is completely removed, though...
Personally, I would just add a padding at the top of the body, then let the menu slide over the content. It would be the most elegant.
body {
margin: 0;
font-family: serif;
background-color: #f4f4f4;
height: 100%; /* My code */
}
html {
color: #222;
font-size: 1.2em;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%; /* My code */
overflow: hidden; /* My code */
}
/* My code */
main {
height: 100%;
overflow: auto;
}
/* ==========================================================================
Global Header
========================================================================== */
.global-nav {
/*overflow: hidden;*/
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
width: calc(100% - 17px); /* My code */
z-index: 9999;
padding: 28px 0 0 0;
}
.header {
background-color: #fff;
margin: 0 auto;
width: 1170px;
z-index: 3;
clear: both;
}
.header div.menu {
overflow: hidden;
background-color: #fff;
padding: 20px 0 0 0;
-webkit-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
-moz-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */
z-index: 99999999;
}
.header img {
vertical-align: baseline;
}
.header div.menu ul.menu-links {
margin: 0;
padding: 0;
list-style: none;
}
.menu-col-one {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-two {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-three {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-four {
width: 25%;
float: left;
position: relative;
padding-bottom: 60px;
}
.menu-col-five {
display: none;
}
.header div.menu ul.menu-links li a {
display: block;
padding: 20px 0 0 0;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
width: calc(100% - 17px); /* My code */
position: fixed;
left: 0;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
padding: 31px 32px 25px 0;
position: relative;
}
.header .menu-icon .navicon {
background: #00539D;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 40px;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
background: #00539D;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 12px;
}
.header .menu-icon .navicon:after {
top: -12px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: calc(100% - 20px); /* My code */
overflow: auto; /* My code */
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.ac-container {
width: 1170px;
margin: 40px auto 30px auto;
text-align: left;
}
.ac-container article {
overflow: visible;
padding-right: 30px;
}
.ac-container input {
display: none;
}
.ac-container label {
position: relative;
z-index: 20;
display: block;
cursor: pointer;
font-size: 25px;
}
#media only screen and (max-width: 1169px) {
.header {
margin: 0 2%;
width: 96%;
padding-right: 0;
}
.ac-container {
width: 96%;
padding: 0 2%;
}
}
#media only screen and (max-width: 970px) {
.global-nav {
padding: 14px 0 0 0;
}
.header .menu-icon {
padding: 31px 1% 25px 0;
}
.header-content-right {
display: none;
}
.header div.menu {
margin-top: 0px;
}
.header div.menu ul.menu-links {
margin: 0;
}
.menu-col-one {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-left: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-two {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-three {
width: 100%;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-four {
width: 100%;
margin-right: 0%;
margin-bottom: 30px;
padding-bottom: 25px;
}
.menu-col-five {
width: 100%;
margin-right: 0%;
display: block;
}
.header div.menu ul li.list-header {
display: block !important;
}
.header div.menu ul li.list-item {
display: none;
}
.ac-container label {
font-size: 16px;
color: #636c76;
font-weight: bold;
letter-spacing: 0.2px;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
color: #454545;
}
.ac-container input + label:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: -6px;
}
.ac-container article {
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-out, box-shadow 0.6s linear;
max-height: 0;
font-size: 14px;
}
.ac-container article a {
color: #636c76;
}
.ac-container article p {
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container article ul li {
padding: 10px 0;
}
.ac-container article ul li span {
display: none;
}
.ac-container input:checked ~ article {
-webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in, box-shadow 0.1s linear;
max-height: 500px;/*added*/
}
}
<!-- [Start] Header Section-->
<section class="global-nav" role="region" aria-label="globalnav">
<header class="header" role="banner">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<div class="menu">
<section class="ac-container">
<div class="menu-col-one">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">DD 1</label>
<article class="ac-small">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-two">
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">DD 2</label>
<article class="ac-medium">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-three">
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">DD 3</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-four">
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">DD 4</label>
<article class="ac-large">
<ul class="menu-links">
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li>Link <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</article>
</div>
<div class="menu-col-five">
<div class="btn-group">
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</div>
</div>
</section>
</div>
</header>
</section>
<!-- [End] Header Section-->
<!-- [Start] Main Content -->
<main role="main">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p>
<p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p>
<p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p>
<p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p>
<p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p>
<!-- [End] Main Content -->
</main>
I followed a tutorial online to make this neat little tabbed div content display but I seem to be having an issue when setting the opacity on the background. By doing this it reveals the hidden content. I've tried playing around and setting opacity at differnt layers but I havent had any luck. Here's an example that you can see. Let me know what you guys think
HTML
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab1</label>
<div class="content" id="scrollbar">
<div id="tabcontenttitle"><h1 class="h1titles">title 1</div>
<div id="scrollbar" style="overflow: auto; height: 185px; width: 100%; padding-right: 19px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula eu ante nec ultrices. Ut fermentum orci sed quam blandit, ut volutpat nunc pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa purus, pellentesque vel tincidunt vitae, adipiscing et dui. Donec imperdiet vestibulum posuere. Sed sed ipsum eget tortor interdum lobortis porta eu nisi. Duis vel purus viverra, congue odio eu, ornare nibh. <br /><br />Vestibulum a congue nisi. Morbi eget magna felis. Donec est nibh, mattis nec faucibus sit amet, dictum at sem. Nulla cursus euismod nunc, scelerisque viverra ligula tempus ac.</p><br />
<p>Nulla facilisi. In nec suscipit quam. In hac habitasse platea dictumst. Phasellus placerat eu augue nec iaculis. Praesent sapien massa, varius nec dolor ac, pulvinar faucibus ipsum. In hac habitasse platea dictumst. Curabitur rhoncus varius leo vel pharetra.</p><br />
<p>Vivamus eget bibendum nulla, vel suscipit arcu. In iaculis, lorem sit amet porta bibendum, mauris purus auctor lorem, in accumsan ipsum massa vel purus. Donec neque justo, posuere sed velit condimentum, tempor elementum arcu. Phasellus rhoncus porta odio et tincidunt. Aliquam facilisis non nisl id molestie. Cras commodo sem ut elementum ultricies. Aliquam gravida, arcu eget vestibulum gravida, leo metus tempor quam, eleifend mollis sapien dui sed justo. </p><br />
<p>Nunc eget odio ac magna facilisis bibendum. Proin eu posuere justo, eu adipiscing arcu. Vivamus et urna accumsan, ultrices diam sed, eleifend odio. Donec consequat lorem nec ipsum scelerisque fermentum.</p></div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab2</label>
<div class="content">
<div id="tabcontenttitle"><h1 class="h1titles">title 2</div>
<div id="scrollbar" style="overflow: auto; height: 185px; width: 100%; padding-right: 19px;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula eu ante nec ultrices. Ut fermentum orci sed quam blandit, ut volutpat nunc pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />Nulla massa purus, pellentesque vel tincidunt vitae, adipiscing et dui. Donec imperdiet vestibulum posuere. Sed sed ipsum eget tortor interdum lobortis porta eu nisi. Duis vel purus viverra, congue odio eu, ornare nibh. Vestibulum a congue nisi. Morbi eget magna felis. Donec est nibh, mattis nec faucibus sit amet, dictum at sem. Nulla cursus euismod nunc, scelerisque viverra ligula tempus ac.</p><br />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula eu ante nec ultrices. Ut fermentum orci sed quam blandit, ut volutpat nunc pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />Nulla massa purus, pellentesque vel tincidunt vitae, adipiscing et dui. Donec imperdiet vestibulum posuere. Sed sed ipsum eget tortor interdum lobortis porta eu nisi. Duis vel purus viverra, congue odio eu, ornare nibh. Vestibulum a congue nisi. Morbi eget magna felis. Donec est nibh, mattis nec faucibus sit amet, dictum at sem. Nulla cursus euismod nunc, scelerisque viverra ligula tempus ac.</p><br />
</div>
</div>
</div>
CSS
#scrollbar::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000;
}
#scrollbar::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#scrollbar::-webkit-scrollbar-thumb
{
background-color: #cd2429;
}
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin-left: 0px;
margin-top: 10px;
}
.tab {
float: left;
}
.tab label {
top: -1px;
font-family: font1;
font-size: 20px;
background: #000;
color: #fff;
padding: 7px;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
right: 0;
bottom: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 460px; height: 230px;-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 0;
border-radius: 5px;
border-top-left-radius: 0;color: #fff; background-color: rgba(0,0,0,.6);
line-height: 20px; overflow: hidden; font-family: Tahoma, Geneva, sans-serif; font-size: 12px;
}
[type=radio]:checked ~ label {
background: #cd2429;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
#tabcontenttitle {style="display: block; clear: both; position: relative; padding-bottom: 10px;}
.tabcontenttext {style="overflow: auto; height: 15px; width: 100%; padding-right: 19px;}
In CSS section .content replace background-color: rgba(0,0,0,.6); with background-color: #282828;
The background transparency set to 0.6 reveals the content lying under the displayed layer.
New answer
In section .content replace color: #fff; with color: transparent;.
In section [type=radio]:checked ~ label ~ .content add color: #fff;; after the same section add the following code:
.content * {
visibility: hidden;
}
[type=radio]:checked ~ label ~ .content * {
visibility: visible;
}
This code makes the text color of the underlying layer transparent ( = invisible! ) and hides all the elements inside it.
you can use from background-color: rgba(0,0,0,.5);