Nikolas96 Posted December 10, 2016 Share Posted December 10, 2016 hi guys... i have two div and i set width of div one to 320px and i want to set width of div two to 100% Minus 320px! that means 100% of remaining width of viewport! what do i do? thanks a lot.... Link to comment Share on other sites More sharing options...
Ingolme Posted December 10, 2016 Share Posted December 10, 2016 Set the first div to float to the left. Give the second div a left margin equal to or greater than the width of the first div. The second div should not have any width value given in the CSS. 1 Link to comment Share on other sites More sharing options...
Nikolas96 Posted December 19, 2016 Author Share Posted December 19, 2016 http://www.w3schools.com/w3css/tryw3css_templates_analytics.htm something like this and responsive... second problem is height 100%! i have a menu bar on top like link above and a sidebar with width 200px and i want to set height of this to 100% of remaining height of vh. and a container div! only with position fixed i success to do that but i want to set overflow of my sidebar and container to auto and want to scroll when size of it get smaller... but with position fixed scroll did not work correctly! i set overflow of body to hidden and want only container have scroll! thanks... Link to comment Share on other sites More sharing options...
dsonesuk Posted December 19, 2016 Share Posted December 19, 2016 Changing overflow of body or html is bad idea, the only exception would be to show right scrollbar all the time. Is this what you are looking for? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> html, body {margin:0; padding: 0; height: 100%;} #wrapper {min-height: 100%;background-color: red;position: relative; overflow: hidden; z-index: -1} #wrapper > *, #wrapper:before{padding:0 15px; position: relative; z-index: 5;} #topnav {height: 100px; background-color: orange;} #wrapper:before, #wrapper:after {content: ""; position: absolute; top:0; left:0; bottom: 0; z-index: 0; right:0;} #sidebar, #wrapper:before {background-color: yellow; width: 200px; min-height: calc(100vh - 100px); float: left; overflow: hidden; } #wrapper:before {z-index: 1;} #container { min-height: calc(100vh - 100px); overflow: auto;} #container, #wrapper:after {background-color: green; margin-left: 200px;} @media (max-width: 768px) { #wrapper {min-height: 100%;background-color: red; } #wrapper:before, #wrapper:after {display:none;} #sidebar {width: auto; float: none; min-height: calc(50vh - 50px);} #container { min-height: calc(50vh - 50px); margin:0;} } </style> </head> <body> <div id="wrapper"> <nav id="topnav"></nav> <div id="sidebar"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi.</p> </div> <div id="container"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst. </p> </div> </div> </body> </html> 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now