I am currently creating a web-page where popup boxes are opening with dynamic content.
The popup itself should be maximal 98% height of the window -> no content goes on small devices in the overflow.
The content can consist of different elements which are floating and their width is managed by bootstrap columns. Their height should be given by their content, but not exceed the height of the popup. These content boxes can float under each other depending on screensize.
Due to the fact that all content is dynamic and therefore the heights are unknown until all is rendered, there could be scrollbars in almost every box.
html,
body {
float: left;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- Favicon -->
</head>
<body>
<div id="wrapper" style="height: 100%; width; 100%">
<!-- simple full size wrapper -->
<div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
<!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window -->
<div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
<div id="leftContent" class="col-sm-12" style="background-color: red;">
<!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
<div id="rightContent" class="col-sm-6" style="height: 100%; background-color: green; overflow: auto;">
<!-- rightContent - can be small, but max 100% of height, then scrollbar -->
<div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
<!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
</div>
</div>
<div>
</div>
</body>
</html>
The example code is only working, when you add a specific height to #dynamicPopup (for ex. 400px).
Is there any way to solve this only with CSS and HTML?
your #wrapper must have position: fixed; so it's height is relative to window not the body. then #dynamicPopup gonna work the way you expect. this is how popups (modals) work.
here's a good example of what you're trying to achieve:
https://codepen.io/jzilg/pen/vEmQrm
and I have no idea why you have floated your html and body. I've never seen something like this before. try to avoid it.
html,
body {
margin: 0px;
padding: 0px;
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- Favicon -->
</head>
<body>
<div id="wrapper" style="height: 100%; width; 100%">
<!-- simple full size wrapper -->
<div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
<!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window -->
<div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
<div id="leftContent" class="col-sm-12" style="height: 49vh; overflow: auto; background-color: red;">
<!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
<div id="rightContent" class="col-sm-6" style="height: 49vh; background-color: green; overflow: auto;">
<!-- rightContent - can be small, but max 100% of height, then scrollbar -->
<div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
<!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
</div>
</div>
<div>
</div>
</body>
</html>
Related
I'm trying to add an image to my "welcome" ID but the image wont display.
Here is my CSS and HTML:
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
}
.header {
width: 100%;
height: 35px;
background-color: rgba(0, 0, 0, 0.3);
}
#welcome {
background-image: url(../images/Welcome.jpg);
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" type="text/css" href="simplegrid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<div class="grid grid-pad">
<div class="col-1-3">
<h1>Logo</h1>
</div>
<div class="col-2-3">
About
What we do
Who we are
Our Work
Contact Us
</div>
</div>
</div>
<section id="welcome">
</section>
</body>
</html>
I've tried both single and double quotes inside the url box. I have also added the image to the body using tags and it displayed that way, but for some reason it wont display through the style sheet. I have also tried embedded and inline css, neither has worked.
Any help would be appreciated.
The section will just take a 0px width and height since it doesnt have any content. Either add come content, which will then force it to expand to its height, or gives fixed heights, like below. That should ideally work.
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
}
.header {
width: 100%;
height: 35px;
background-color: rgba(0, 0, 0, 0.3);
}
#welcome {
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhUTExMWFhUXFxUVGBgYGBcYFxgYGBUXFxgWFhcYHSggGBolHRUYITEiJSkrLi4uGh8zODMtNygtLisBCgoKDg0OGhAQGi8lHx0tLS0tLS0tLS0tLS0tLS0tLSstLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAHsBmgMBIgACEQEDEQH/xAAcAAACAwEBAQEAAAAAAAAAAAADBAECBQAGBwj/xAA5EAABAwIEAwYEBQMEAwAAAAABAAIRAyEEEjFBUWFxBSKBkaHwBhOx0TJCUsHhByPxFDNichUWkv/EABkBAAMBAQEAAAAAAAAAAAAAAAABAgMEBf/EACMRAAICAgMAAwADAQAAAAAAAAABAhEDIRIxQQQTUSIyYRT/2gAMAwEAAhEDEQA/APlbQrQqgqZldxkSrAqoRA1NCZLUXLZUa1FDh4qkQwc7I4pGAfNCY26eaw2VITYGm0TcFXIF4bHXoj5ANb9PopDZA+nVBFnYZ0eqaLTlaRpHjxVMMIMH3um6RmIgTt76JMlgaUzEbogce9fTgiBgAcTrcwlqZOvFHYhrDMLrg8k2ymePvmlcLWhw6iT0K0zoTbQ+Nys5IkVpVHabjX0081q4LEGSQeH0WOIzCPdp1Wlgom1pM+iUkqA1nYx5i8x5A9dvorYaj8wENs4GQZ1AmR9EtVp2Ph9UHs+u5r9NOPNY8FX8SlLez1NDE1AyQ/vWHGRHo4aLUw1a8kXgnLxIix58PFef7NqgjK7X8NpEjaR4a9OC0aVW7gbg6e+UlcmSH+HVjmbHadYEB0GABpoGGLx1+iHSxQkRABiBtmG3Q+9EmKmak5psY34Tf/HVLYasQ2dATHK0EQojCkVOe7NrEgSdb6cjMET5oQAAmYGhi8XG3WEXC1A8ZXb+5niqVg0Ejz8tY96poHvZD28/+s7g3/YhUZTEHzA+xVi0gQRa0eNx4cFcVcp5H+JCblRNJ9k4ZxiR4m5vp5LSw9IgX8PeyBRsczRqbj1lMsxP8j7LGeQ3hGgGIoFxiIPuYSjsKtU1AYKhzfFR91DeJSM2mwjW49U3QIPI8ER1Pn5/dVNOQTb3z4JOakOMeJctS+JozceIR6Txuh18UBp6lEVK9FT41szy2UFzSr1qh9mUjVqBdSRxOSDvJ9wlqpdw+iVq1o0SVXEO5eX2WqxmbmO1M/6Ss6vUd+l3kVP+qZ+Zh8CmcJToVNGO8ifotFFLszc2Yldz/wBLvIpCsH8HeRX0Ch2FTP5fRMD4ep/pCPugi1Cb8PlVVp4HyKUqlfWcR8LUnC7R4AT5rA7Z7P7Own+7JfEhgLi8zpaYA5mFcc8XpDcJLs+dVHJWq9O9q4xj3k06Yps2Elxji4k69FmuculAkDeUFxVnuQnFBaKvKFKl5VYSGBCuwKgUgpWWEDVamqMKKFSJZZnFc1y5u6IxojRNEl26dNE0ypEeH3S4GoHBXCohhqfeMkowZoh08p5H3b6IrGRbXRBLCBuY8OM20UUA3Ny8kRjdRFvHdQ2g3UEzv/CQhmg8PO95/wA81T5MW3lWwtMQDzP1hMGnfUQJSuiWdhcNA72vDonqBMWjckEbIIfJnWBbhxV2v5EWss27ESxoNyPEckTCNI7w4gG1+qmk0OEaTbx4qGtsbX8R70QBqtcSCI2jXwSsm1riQZG4vf0U0akkEG35p48fYVmgm0XJF+uijoDSoM0cDHE8OvKQm24h0gOEHTlMH/PilxhjTAmYOZs31EA7aHXxTDBIgaxbcDn9Vg6ezbjKDcX2aVN3d7x1+m87yFRoJFRogtBzDnLZEHoHKlBzrzNx4AgQi02EiAOLY0t4a6nqFk1Rd2WwRJgTzHG372WpXpz3tjEnY6fcLKgNvPIjh4rW7MxAcPlu30PHj9fVZN1srHX9WDe4mBtEb6e/oglxgtOlonktE0C29uAM2B2B+/mhPoW/ZT9iLlBg6GILY5K9TETF0pUdsh/NT4J7I+xrQw+sSrU8c5u/gki9Eacw0J5/yq4J6JU3fZpM7VG4XN7Sp8+kLJ+WNz4C5+y7KB+Qnqf2CSwRL/6JofxXaQJ7tgkamJXNpvvDAAeX3U0eyartoWyjGJlKUpMXfWQHulehw3w4PzuWhR7EpD8s9Uc0uilik+zxtLCueYAJT4+HXi5Zm5TB8wvYUcKxv4WgI0KXkkaLCvTBwvYNDKCaQB3BJdHmtJmGaBAAAHBNkKFm232bJRXSAinyQsbiKdJhqVHBrWiST+3E8k4F8w/q3Re2pSqF8tc1zWt/TEZusyPJXjxqcqYpz4q0Z/xD/USu8luHApMkw6znuGxuIb4X5rwmKxDnuLnOLnEySSSSeZOqis5LPcvThjjBaRxuTl2RUegPcpeUJysaKOKG5EJ4aoLwpKRCjxUKEiii4BQrsKmiiWNuiuHBVZqrNsYVIhkDWEWdEEJlmqaEwmGcAZ5GyNh3/hnSR/KBT3nmmaQmOUk+EKiGMVGBrncAYlVySV1cFw6336q1CYvrcIICU2HY6cUamyRrr+6FVpiBqnqTQbGxgDrvKTECMZbWTDaYsSbH3KVozAGvsJmkyMozXkCLaa/skILgTAtxTL3EnlHKLXSeEAnzJE6WOyPTHdG+xUsQfDnzE8ufim3Uy4BwIj1SfyJbPeNiNptfx0V8BWDDrN4ym/8AHsKGA5QpTMW28fcKzHODmu4OA8ZnRN4SHFrgIEyRPI2ibabrI+I+znuc3LUe1rXguyksLhxkXBEyPHkRLd6KjppnpMbXeYzi+Z+lps0W8kSnVAhxHI+Oi8v2Bj6jw8vqPqMFSo2nnIzBgIFyBe4XoaNVuuw+iwjDjFI6flZY5M0pxVJmlRqFroIzNdpyNpB+qLWOQjJOxI3alKo7uulxOvvZEw+KDhcyRA5+ahozUvB2s3PLxrbMNyN7eHokg8sdHLMDx3nkVo0qYMODoI8jyjb1WdinEOnbS35Tw5fwpS8DIvR+njn/AKpHH7poYwmAeET6rCw9SCWnw6J60ZmmW+oH7jmpcF+BGcv0LiHZjOh+qr8r9RDeuvlqVOFqDMCbb++avSoNLv1OJ9SmtCSctk4VuYlrASf1H9gtqj2XMZyXdT+2iewWDDBz3KahDZ0RxJdiTcAwbK4wbOCaXKTSl+Am0QNkQNUrkUM5cuXIA5colcgCVyhQkBMrK+IOwaOLp5KouJyuGrSdxx0FitRUrtcWuDXZXEEB0TBixjeOCabTtA1Z+ce3+zamGrPo1BDmnwI2I4gi6yXrR7bFX59T5zi6pmdmc4ySQYP0WW8r2F0cPpUkILnKzyhkIZaKyqmVxCk2SKBuMKkqSuspKKyuCIykVEJIAlHVS9t11A3UZ5J81RJzRdHaLoDHI420TQmFoDvAHSZRrxbSePvkgjY9fr/KZZBEeQ5ymQyS+x58PBGw47uqSL5ttKapkhoG593QyWh2lBty8SiU6oIIHCRP0Q8DJgcfP3Ypyn2U4xNgAY46g6KW0uyaAQWxG+qLiK2WBoSNYtJ/haFHBt3v1NvIXWnQotEQ0W3gAzHmsZZkilBs8/2bSe9xcKZJmJgwbcTbZaWG7Jqg6BoN+J9FuU6OYfcxptqnaVJrYuB74rCfyH4aLCZuD7KIF3k7wB6SVoYT4epiZEi+pJ9BEIlbtKmyBIIiSdh1OngiUu13GDcA/liD6wfPyWEsmRmixwXYxQ7OpU7ZWidDAnzJJTv+nH6BysPRZ47UFiWg8yLjrurO7bvBaImx4xwvdZPmargjuy8I2mwtjKc9Rx0u5zi5xBgTd3QaJhtNpGjTO0WOgVG9osa05jkBFp1tMwZkhZlX4opCflZniLuIcySN4dcgcUVJg+KHquCaCCwhsbH1F0B2GAcTrF+RH3WY7tWrVcMwgT+JskcYHLaU9h6oMk96CR3Zi1vwnddEIyrZzTcb0PYR48OB6p35YfZ2jrOiOjXHmFkBwaQQZG/GPumuz8QCeunMIlH1BCXjFMfh3MgxpN+I97KpqbjkfAxrxWn2mwxMxG/5SDseHUrGkRGhFo4JxdrZnNUwxxIjgd7I+B7WNJ2cBp6rNzlrct+RN46FCfU4hVxRm507R73s/wCKKL7O7h8x5jRbVKq1wBaQQdCLr5E6otbsLH1mPBYDB/ECDlI5qZY/w3x/IbdM+lLpSXZ/aDaugIcNQQR4idk4sTsWzpXLl0oA5coldKBkqFErpSAlcolRKALLxXxT/UTD4Yvp0h86s21v9tp/5O3I4DzCwP6j/GOIa52GpNdSAJa98993DKR+FpHiQdl8sqO2XXh+Ne5GE8vkRrtftJ1eq+q4NBe4uIbMAkyYm+qznOVnLgyy7qMAJKoTwVnOQ3vSZSOzQhOcucqqWy0S42Q8ylxQyobLSDjEXU1SDff9ku4QbhNPiAbcFMbbE1R1MGJ2VJKK2qIhS1wWtElabLSmi3Q8p9YStM7JtjCQBoIInxnxTRLLUhcN5/Upl+rotGnnCDRowQc2+33T1Ok3SDxnj5oc0iWgFHDy6bH/ACtGlgN3dbfRFo0Jg34e4TrHMAhx9ZhYyyvwfEtSw5bdrI58fEp3DUL94EfTxCzqvbDGaQTxj990A9vnbvGba+UAacli+TKUUemw1Nn6rbbKX9oUqdzln/sfovH1+0Kj7uqtbsL5TfgNUvTf37AyCIP4g43JJHpHml9d9so9m/tdxnK0BmWcxsNOKwcX2s5zwDVluoDRMGN7CfVI1cW9/de9xk/gB1g2kNIgX0J4IbcQ9rv7cNDt4MAAyRe86eHFNQSFZr4WpSpFtSo55IMtB7oB5N4jinf/AGQuBNNmVgF3mHayczWtMxbXksaliXXYCHOeCKk3ygwOFjvG2+oUUMPTa4fMcXudbLckgaAA2Nzp1TcU+xWWb25iah7kkSJJ1jkJga89B47WFxLgJFiYcahl9QOkANl1hJ4C0parSDWzTBAsMxjUR3baDTqAgU2OeR3iReIgXBkgc0qT6QN12MVJJkucTm70gGb/AJnCb8hZM4DA5u86ALuIn8R5nwVjRhkw/MBJzemXY2Oqph8UD3ZvJPSL6q1jMZZPw2AY/DA57W2RgYbmuBr6LMpVXCxMt46+gumWVMzYB4yOY4HZDRmNOq6SQd5G8bFXpuyxckE62sdfVZFPEgHpqP3H2WjTqtcImx99PYQ4jTNuhjfyv0NpHuy832jXPzHSIgxbQgaG3JEdiyzU9Rx4EcZCTxuJbUgx3rXUrHTHOVqhhmKMfspNQG15/lZ2DhziHyLGDwPPihNxMWP3T4UZnu+xvhl7m5pyAgd4jMT/ANGkwBzPkvS9ldjU6ImXPf8AreZPgNGjovm+E+KcUxsCqQBpIDo04p3C/HeJYBmyVADeRBIvu37LOUZs6cc8UfD6culeUwHx3hnj+5NI21BcD0LRPovRYPG06rQ6m9rmm8g/UbeKwcWuzrjOMumMLlEqJUlllEqsqC5AFpXShl6oXp0S5IKXIOIY17S14BB2PIyFUvQ3VE0iHkPJfF3w5XxNTMBSIAhplzXROjwSQ7fzXy/4j+H6mGflqANkSJNnf9XaHpqvvLqiSx+Gp1W5ajGvbwcAR6rpx5nHT6OabXZ+eH0nC50QKlThZfSu2v6cvc6cG9rOLKjnZZ4h0HyK+f8Aa2AqUKrqNenke3XgRs5p/M07ELrjkjLpijtWZziqOVqhG0oLnSUpSNEiSVEqHLiYUllSq5FMqJSGWdWJ1MqweDAn31QC1cIUDHG1Go9OsHDKGzPPS/DdCw+HaROvVP0g0bjortsh0TToEaa+CPTw53uuZWG32+qg1jNvroi2SPUaLPcwiZoMgD+f3WW7EEES4R1UVsezTNPSfrwU0Bsio43dpz/i4VnP0sNfLnfZecb2q6bNmPHxgRwS9XHPc7vuMG50A/wlQ6ZtY6vSE5RLjyFup0QMQzJTh9US5stY0ZiAf1uBDQYGgnUaLPa5zjuWiSAb9Dp3ld876TJEaHp/G6dARRpQ6QARpcGAT4rUNR2UgQAQQcoIkW1JE31iyy2EuMTAtqYA6plrTIBnjyFtSihMbb/aaRY5u7FrTqJ0jibn1VqFN1RwyOcS0GXO7oGXQNvM69beGfXqgtjUbRYm1+N0XB4iq0Op0ycrozZZ2BOWQJ3OhRQDuJwDmjL3Te4aS46XNQwMunVF7Nw1Iuu9hMFwaGuIEEwXEN/EYEHntoloLj+ANAsPxATvIHu60MPSa0uc6JO4ENtoA0WESOd0+LZDkkb2BDaoAN2SSRYFxMWHAePokquHax8E/m7rjAHEA7B0WlU7PxTSba6CfQE+/FX7VztcHQMrw0kSCDfW2m1k4x46MZSch3A9pOyZHOtJAkga7c9UJuIbn0AP4TBESDq3h/KnDVGDNYOpg6HbMLHiYII22ul+1sG1pBYdpI/5bGNVSSsQavXcx2caWPvqrU8ZmkgQY0mx+x4IFXGZqYluV/E6PskHOGxgxp/KKEOVMaDJI73HcFVZizBIJ0jw5pRrw4kuN+uqhxEwJuihDT8RmdJJ89uCaD2xpp97+iRiGg2jjxVqYB/EY/5beJToEM1MTJkaeHoCl6jhNhzFr6KziJkXbvEX5j+EQ0Wt7rhc3aeV7dUhgjIbmNxwB+qE6pe11fDvk5Zte2k9VTGUS3vD8P0TSQUR89Ndm9r1aDw+k8tM34EcHDccllurTdcakiUOKBH2j4T+KmYsFjobWAJLRo4Tq30kL0JcvjnwFhqjsUxwkRJnlvPK/qvrheuHLjUZaOzHlbjsKXKhchGoqGos6G8gYuVC5CNRUNRVRDmEc9Cc5Uc9CfUTSMpTLuclMXjGU2lz3tY0alxAA8Sq4vGNptc97g1rQSSTAAC+L/FvxO/GVOFFjj8psQSNM7uZjwmFrCFkpOR6/tf+plNhc2hTLy0xmccrCNyIufRfP+2u2q+Kd8zEPzROUQAGgmcogTHWVn5o8fpshG/8rZRSN4xS6Je8RylCJXZSuVGhVQpKhAyCqqxVUAcXKYRDTXCkVnQyKT3Ap1uIA2A989Up8tXdOx89UW0JqwzsZwHvwVRinu5RwCj5Ui4Hhuq6CEKVipF3Uzub9QhuAMzwvPFSTEa7yppsG89NDvx2VAXw5y3HgdAPsVLqbSZcZ1mN/GYJVWxce/VWdAEZp14wLpiL4eqWut0P18Ueq8E+dkvhngAl2pkReY5IuFw2Y/iaNbuOUWBN0hMiwFrmbxbURA4hHAkWYTP/AMgeyPNCoskGCBYGCBoYBdrYCeZ5brVrdkhhaPmteYnKC4gDUHSIM6Tb0A2IQa1ofBgAmCGibWmJEjRNVMM1jiKbszCQNIkjrfWfNFdSaKUBgDg8EkfmB4E8Eu+oMpF/stIx/TNyvoYGI8D6JxuJLmd60WBOh8fFZzIcHA6xPkr0WkRq7XKLG8bg2KujOhvBUwXGSWuvcWjhITeQvBPzScsxxja27TGoWVQLcwzfWOd1s4wtcym8tnLbu26TG9o9wpaExRwdP9t8HK20GDBjwTdXFZ2y4EPBHCNNuMwlZYXkC4uQdCWnUc4mVNOoYc3rHEHX9h6p0Jg31hBExJHglnPVqhBM5TE+YKG8ETCGgot8xX+Yeh9F1AgAGLzuPumH0zmAgkaWG3G3glQqIZXMG/QK9N+/mAjUuyKzj3Kdha/vVBqUG03w+o1pBIIHeIPAwhPwKHarIEi4mSLEmUKnUL7GDpYifJxO/DmqP7VpsADS59uTYPDRJO7asQKbBeZuT9Y52Caix0adNjhbKQZMW5G2Y6ozqDgO+QwR+cgTaY5lYj+3axEB2Uad0AGOE6pCtiHvPecXHiSSU1BgjSf8gD/ccSZsG6eaa7Fwb8Q4ChSBcPxOcbN5wET4c+EsTXcHGnkpzd1QEDTZup+i+o9idiUsKCKYALozEACY4+ZUZJxj12AL4S7A/wBMHve8vqvADnEQABo1rRYCVvucgZ1UvXG7k7ZfKlQYvVS5AL1Q1EqJ5BnPQ3VEB1ReP+JvjVlGWUYfUBgkiWNjXfvHkOKpQbItyej1+IxTWiXODQNyQB5leZ7d+NcPRb3HNrPuMrXC1jBceEwF8t7V7arVXudUdmcTN9AOAboEhRdF3Anhw8lqsaNVi9Zpdtds18W8vqOMbNFmNvMAfubrKD+V/FEqVwUJz5WlGyRWo7kqkq7jG3voqPb0QUipjiq1AodwUFBRW64uUlUISGTKhQVCLGONKuHIbVJ0QII4jT9kIjl76ooVnm3mkwAPde0xtx/ld8ziPNMEd0HorPYJ0WTpALPdw9+SrvJkm3so9No71hZTVYAbAC0/X7LRdCKsaDfUzEGzd9wZOyh1SDqCdYH8QidptAygWEfsDfjql8MExB3VNNjvEA9LXB5lFLO8HMGUczPOSTYnwSz3lgJbYpht3GdhZAhsvD3Z6gLi60jK28AAi2kDhdWZWeWxmdBuReHETFt9Vn/6hw0PA7KBiH/qPHVaxikQ3Zu0szmPaRznYxeORgeiDTwVSD3Sedo0WQKzr94+ZUmu+IzGOpV0RxNXC4VzmTw5pij2bUgknLvf662KwGuKkEo4hxPQMwkjNnGwnMNTylP4DD0y2S6HcWP5fmE+4XkQVYFDiLiehrQHNIdTtzAFjeRrMdUejiaHzDmqmL3AJ3iBvePILzIVpT4i4m9isZhQRkzu2NsoPW+qD/5WkIilJHF3TgFjFcUcUPiekZ8UZW5WYekDxILvQpGp27WIIDsoOzQGj0CyVKFCK8FQ47H1TrUffXvFAlUUqgouXJnAYCrWdlpU3PPIWHU6DxTfwnhGVcVTp1G5mmZF7w0nbovs2GwzKbctNrWN4NAA9Flky8dEN0eD7G/p0TldiakDU02a6aF2xmNF7XsvsXDYcf2qTWmILolxEzdxuU5KrK5pTlLtk2MGoqmogEqCVFBYU1FU1EIlDcUUKwpqJfFY1lNpc9wa0akmFDivkPxxi3uxbw5xIbLWjYDkqURwjydGx8V/F3zyKVEvbTBcHmw+ZoBEScuvWV5KoDuYOsTPmlC4397oc2lbaSOpQS0g1Qi8nhwJ8/BDDrdTufJAB3TTxZCLqizhAgx4IIeNOd9ugVaIkwVRuqLCi739FTZQ/VVKCkiQVVyrN1zhBQM4lVUlc5ICFSFaFVIZ/9k=);
width: 400px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" type="text/css" href="simplegrid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<div class="grid grid-pad">
<div class="col-1-3">
<h1>Logo</h1>
</div>
<div class="col-2-3">
About
What we do
Who we are
Our Work
Contact Us
</div>
</div>
</div>
<section id="welcome">
</section>
</body>
</html>
The reason it won't display is because you applied height: 100% to #welcome, however, the browser doesn't actually know what that size is because percentage values are relative to the immediate parent. In this case the immediate parent is the body tag which you've also set to height: 100%, but yet again the browser can't calculate that either. This time it's because you have not defined the height of the body tag's parent, which is the html tag. So because the html tag's height is undefined and it is the parent of the body tag, the browser has no reference value to calculate 100% height from. So both the body tag and #welcome's heights are 0.
You can set your CSS like so.
html {
min-height: 100%; // this will reference the viewport but could become bigger than viewport depending on your content
}
body {
height: 100%;
}
#welcome {
height: 100%;
}
Another option would be to set #welcome to be 100% of the viewport like so:
#welcome {
height: 100vh;
}
Hope this helps.
Hiw can I split my page into one top (50% height, width=100%) and two bottom columns(50% height, 50% width).
I tried but no success...
<html>
<head>
<title>CSS devide window into three (horizontal, 2 vertical )</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
.wrapM {
width: 100%;
height: 100%x;
padding:2px;
}
.wrapT {
width: 100%;
height: 50%;
padding:2px;
}
.wrapB {
width: 100%;
height: 50%;
padding:2px;
}
.wrapl {
width: 50%;
height: 100%;
padding:2px;
}
.wrapr {
width: 50%;
height: 100%;
padding:2px;
}
</style>
</head>
<body>
<div class="wrapM">
<div class="wrapT">Hello World This is upper Content</div>
</div>
<div class="wrapB">
<div class="wrapl">Hello World This is bottom LEFT Content</div>
<div class="wrapr">Hello World This is bottom right Content</div>
</div>
</body>
</html>
To get .wrapB1 and .wrapB2 side by side, they should float: left. But this is not sufficient, because of the padding. Add box-sizing: border-box to have this fixed.
To get a height of 50%, html and body should be set to 100% height. Additionally, you have a syntax error in your height specification of .wrap.
Have a look at https://jsfiddle.net/sgtb00nt/ to see a working version. I have also fixed the wrong nesting of <div>s.
I am trying to build a layout of buttons. I have worked at it for a while now, but I doubt my code would be helpful in understanding my problem. I have included the specs of the buttons on the image below. If you guys could show me how to make this layout it would be greatly appreciated.
Start with creating container and appropriate divs inside.
<div class="container">
<div class="blue"></div>
<div class="center">
<div class="red"></div>
<div class="yellow"></div>
</div>
<div class="green"></div>
</div>
then you have to position them and set particular width.
body, html { height: 100%; }
.container { height: 100%; }
.container > div { float: left; }
.center { height: 100%; width: 33%; }
.blue { background: blue; width: 33%; min-height: 100%; }
.red { background: red; height: 50% }
.yellow { background: yellow; height: 50% }
.green { background: green; width: 33%; height: 100% }
you can alternativly use flex box to get rid of float: left
.container { height: 100%; display: flex; }
Demo: http://jsfiddle.net/eLq0770h/
The way I would approach this is to make three DIV's side by side to make the three columns of your design. (the blue column, the red-and-yellow collumn and the green collumn)
You can then use two more DIV's to split the middle column in to two rows.
Your code would then be structured as follows
<div id="site">
<div id="leftcolumn">
CONTENT
</div>
<div id="middlecolumn">
<div id="middletop">
CONTENT
</div>
<div id="middlebottom">
CONTENT
</div>
</div>
<div id="rightcolumn">
CONTENT
</div>
</div>
You can then use CSS to set the widths and heights of these DIV's.
I don't know if this is the right way to do this, but this is how I do it.
Your code looks great. Here's how I would approach the project http://codepen.io/dfrierson2/pen/RNoWZe.
First I set the wrapper to 100% width then i centered the container with margin: 0 auto; I add a width to the container of 600px and set the height to auto and gave it a css selector class of overflow: hidden so that the container will expand with the content of the divs. I would use Bootstrap as a frame work because it is a responsive frame work with great starter code.
http://getbootstrap.com/getting-started/#template
It also has great pre style navs and buttons http://getbootstrap.com/components/#btn-groups
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.wrapper {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
width: 600px;
height: auto;
background: yellow;
}
.col-md-4 {
border: 1px solid green;
float: left;
width: 198px;
height: 700px;
}
.blue {
background: blue;
}
.red {
background: red;
height: 350px;
}
.green {
background: green;
}
.one {
border: 1px solid black;
height: 350px;
}
.two {
border: 1px solid black;
height: 350px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 blue">33%</div>
<div class="col-md-4 red">33%</div>
<div class="col-md-4 green">
<div class="col-md-6 one">50%</div>
<div class="col-md-6 two">50%</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I created a print style sheet which links to my html page. Changes to the font, colors etc. work in the print version, but I can not change the size of my divs in the print version. For example, if I have a content div that is 300px X 300px on my page, it won't change it if I change the dimensions in the print version.
To figure out the root of the problem, I used inspect element to see if an css was overriding that in my print page. I found that the content div width is controlled by the body width. So I tried changing the content height and the body div in the print stylesheet. That did not work. I also tried creating a separate style sheet for both the main css and the print css. That did not work. Is there another way I can troubleshoot this issue...something similar to breakpoints maybe, but for html?
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--- TITLE - FROM SPECIFIC TO GENERAL --->
<title>Page</title>
<cfinclude template="/assets2011/webfonts/comment.htm" />
<link rel="stylesheet" type="text/css" href="/assets2011/MyFontsWebfontsOrderM2845569_css.css" />
<link rel="stylesheet" type="text/css" href="/assets2011/css/global.css" />
<link href="print.css" type="text/css" rel="stylesheet" media="print"/>
<style>
body{
width: 8700px;
height:2000px;
overflow: hidden;
}
#section{
width: 8000px;
float: left;
height: 1000;
z-index: 1;
}
#content{
width: 1000px; height:300px; margin-top: 10px; margin-left: 50px; overflow: auto;
}
.navbarLeft{
height: 700px;
width: 40px;
top:0;
z-index: 2;
position:absolute;
background-position: 50% 30%;
background-image: url(navL.png);
background-repeat: no-repeat;
opacity: 0.05;
}
.navbarLeft:hover{
opacity: 0.5;
}
.navbarRight{
height: 700px;
width: 40px;
top: 0;
z-index: 2;
position: absolute;
background-position: 50% 30%;
background-image: url(navR.png);
background-repeat: no-repeat;
opacity: 0.05;
left: 2013px;
}
.navbarRight:hover{
opacity: 0.5;
}
table,tr,td {
border:1px solid black;
}
</style>
</head>
<body>
<!--Factor 1-->
<div class="section" id="factor1">
<div id="content">
<!--Begin Content-->
<p>textiyiuypilkhjkujp;mjl;juipoupoj;hikhiyuiuj</p>
</div>
<!--End Content-->
<!-- Navigation -->
<ul class="nav">
<div class= "navbarLeft" id="menu" style="left: 755px;"></div>
</ul>
</div>
<!--End Factor 1-->
<!--Factor 2-->
<div class="section" id="factor2">
<div id="content">
<p>text2khlikhlkj;ljlji0piomloj;lkjoippm,klikp</p>
</div>
<ul class="nav">
<a href="#factor1"><div class= "navbarRight" id="menu" style="left: 2005px;"></div>
</a>
<div class= "navbarLeft" id="menu" style="left: 2755px;"></div>
</ul>
</div>
<!--End Factor 2-->
<!--JavaScript-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>
CSS Print Style Sheet:
body{
width: 1000px;
}
#section, .navbarLeft, .navbarRight{
display:none;
}
#content{
font-size: 110px;
overflow:visible;
height: 1000px;
page-break-after: always;
margin-top:10px;
margin-left:50px;
}
p a:after {
content: " (" attr(href) ")";
font-size: 50%;
}
I have found that the Chrome browser developer tools are fantastic for debugging CSS issues.
Open the page in Chrome and hit F12
Look to the right on the elements tab and you'll see all the CSS that is being applied to the HTML element selected on the left.
You can edit the CSS in place in the toolbox and it will immediately update the browser window with your changes.
More information about the tools can be found here: https://developers.google.com/chrome-developer-tools/
as I've understood, for a div to actually be 100% in height, the parent div needs to be set right?
So, imagine a div structure that looks like this:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
This is supposed to essentially be a sticky footer layout based on Ryan Faiths sticky footer layout.
How can in this case the gallery have 100% height as well as the wrapper? I can't figure this out.
My CSS looks like this: Exactly the same as Ryan's CSS, only with the gallery class added.
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
(Deleted all the old stuff)
Here is the new HTML with gallery 100%, hope it works :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:
Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.
My 2cents...