Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" href="Xrhcommonstyles.css">
- <style>
- body{
- margin: 0px;
- padding:0px;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 11px;
- background-color: #dedede;
- }
- /* ::::::::::: [ FLEX PAGE GRID START ] ::::::::::: */
- /* ::::::::::: [ FLEX PAGE GRID START ] ::::::::::: */
- .flex-page{
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- min-width: 100vw;
- }
- .flex-page > div{
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- }
- .flex-head{ height: auto;}
- .flex-main {flex: auto;}
- .flex-foot {height: auto;}
- .flex-main > div, .flex-head > div, .flex-foot > div{
- width:100%;
- }
- /* ::::::::::: [ FLEX PAGE GRID END ] ::::::::::: */
- /* ::::::::::: [ FLEX PAGE GRID END ] ::::::::::: */
- /* ::::::::::: [ COMP DESIGN START .... ] ::::::::::: */
- /* ::::::::::: [ COMP DESIGN START .... ] ::::::::::: */
- #flex-row-one{
- height: 72px;
- max-height: 72px;
- }
- .flex-page > div{
- border-top:1px solid #999999;
- border-right: 1px solid #999999;
- }
- .flex-main > div, .flex-head > div, .flex-foot > div{border-right: 1px solid #999999;padding:0.3em}
- /* ::::::::::: [ ..... COMP DESIGN END ] ::::::::::: */
- /* ::::::::::: [ ..... COMP DESIGN END ] ::::::::::: */
- </style>
- </head>
- <body>
- <div class="flex-page">
- <div class="flex-head">
- <div>flex–head 01</div>
- <div>flex–head 02</div>
- </div>
- <div id='flex-row-one' class="flex-main">flex–main Row 01 Fixed Height</div>
- <div class="flex-main">
- <div>flex–main Row 02 Content 01</div>
- <div>flex–main Row 02 Content 02</div>
- <div>flex–main Row 02 Content 03</div>
- </div>
- <div class="flex-main">
- <div>flex–main Row 03 Content 01</div>
- <div>flex–main Row 03 Content 02</div>
- <div>flex–main Row 03 Content 03</div>
- <div>flex–main Row 03 Content 04</div>
- <div>flex–main Row 03 Content 05</div>
- </div>
- <div class="flex-foot">
- <div>Flex Foot 01</div>
- <div>Flex Foot 02</div>
- <div>Flex Foot 03</div>
- <div>Flex Foot 04</div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement