jerik jerik - 4 months ago 20
CSS Question

Fit div position and size to browser

I'm trying to create a html page, where I have a (lean canvas) grid that adapts to the browser size. The farest I could get, see the following sourcecode:

mdCanvas.html



<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/*<![CDATA[*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
html {
width: 100%; /* remove */
height: 100%; /* remove */

font-size: 16px;
}

body {
width: inherit;
height: inherit;

font-family: "Helvetica Neue", "Helvetica", Arial sans-serif;
line-height: 1.5;

/* changes in new class */
display: flex;
flex-direction: column;
justify-content: space-between;

padding: 3px 3px 3px 3px;
}

h1 {
font-size: 2.5em;
line-height: 1.5;
}

h3 {
font-size: 1.5em;
font-weight: 600;
}

ul, ol {
margin: 1em;
}

ul li {
list-style: outside disc;
padding: 0 0.5em 0;
}

ol li {
list-style-type: decimal;
}

.flex {
/* basic styling */
width: 100%;
height: 200px; /* auto */
border: 1px solid #555;
font: 14px Arial;

/* flexbox setup */
display: flex;
min-height: 50%; /* 150px */
}

.flex > div[id] {
flex: 1 1 auto;
padding: 1em;
width: 30px; /* To make the transition work nicely. (Transitions to/from
"width:auto" are buggy in Gecko and Webkit, at least.
See http://bugzil.la/731886 for more info.) */
/* transition: width 0.7s ease-out; */
border: 1px solid black;
}
.flex > div > div {
padding: 1em;
border: 1px solid black;
/*
flex: 1
*/
}

.flex > div:hover {
/* width: 200px; */
}

.box {
width: 19%;
border: 1px solid black;
/*
display: flex;
flex-direction: column;
*/
}

#mdc-problem { }
#mdc-solution { height: 44%; } /* removed */
#mdc-key-metrics { height: 45%; } /* removed */
#mdc-unique-value-proposition { }
#mdc-unfair-advantage { height: 44%; } /* removed */
#mdc-channels { height: 45%; } /* removed */
#mdc-customer-segment { }
#mdc-cost-structure { }
#mdc-revenue-stream { }

/*]]>*/
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="mdCanvas.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/showdown/1.4.2/dist/showdown.min.js"></script>
</head>
<body>
<h1 id="mdc-canvas">LeanCanvas</h1>
<div class="flex">
<div id="mdc-problem">problem</div>
<div class="box">
<div id="mdc-solution">solution</div>
<div id="mdc-key-metrics">key metrics</div>
</div>
<div id="mdc-unique-value-proposition">unique-value-proposition</div>
<div class="box">
<div id="mdc-unfair-advantage">unfair advantage</div>
<div id="mdc-channels">channels</div>
</div>
<div id="mdc-customer-segment">customer-segment</div>
</div>
<div class="flex">
<div id="mdc-cost-structure">cost-structure</div>
<div id="mdc-revenue-stream">revenue-stream</div>
</div>
</body>
</html>


My desired behaviour, but where I struggle at the moment:


  • The grid outline should not glue to the browser border. Should have a small padding. Note the grid should always expand to the available size of the browser window.

  • The grid should not be larger then the browser window. It should not scroll. Except the content of the boxes is larger...

  • The boxes should not overlap. It appears on box channel and revenue-stream when you resize it.

  • If the browser window is resized, the boxes should resize and hold there proportion.



Does anybody have some hints for implementation?

PS: If it's possible without javascript would be great. But is not a showstopper.

Answer

Check this :

  
    function doSections(md) {
        var result = md.split("#");
        var sections = {};
        // console.log( result );
        $.each(result, function(key, value) {
            if (value != "") {
                //console.log( key + ": " + value );
                // get the heading
                var header = value.split("\n");
                //console.log( key + ":" +header[0] );
                // add header to the section
                sections[objKey(header[0])] = '###' + value;
                // get the name of the canvas or project name
                if (header[0].includes("anvas")) {
                    sections[objKey(header[0])] = header[1];
                }
            }
        });
        return sections;
    }
    // generate object key
    function objKey(name) {
        return 'mdc-' + name.toLowerCase().trim();
    }
    // process the markdown content
    function showmd(value) {
        var sections = doSections(value);
        // console.log( sections );
        $.each(sections, function(key, value) {
            console.log(key + ": " + value);
            var tagId = "#" + key;

            var sdown = new showdown.Converter(),
                text = value,
                html = sdown.makeHtml(text);
            $(tagId).html(html);
        });
    }
    // get url parameter
    var md = getUrlParameter("md") || "mdCanvas";
    var pathmd = md + ".md";
    // get markdown file and content
    $.get(pathmd, function(data) {
        showmd(data);
    }, 'text');
html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }
    /* remember to define focus styles! */
    
    :focus {
        outline: 0;
    }
    
    body {
        line-height: 1;
        color: black;
        background: white;
    }
    
    ol,
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    
    caption,
    th,
    td {
        text-align: left;
        font-weight: normal;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
    }
    
    blockquote,
    q {
        quotes: "" "";
    }
    
    html {
        font-size: 16px;
    }
    
    body {
        width: 100%;
        height: 100%;
        font-family: "Helvetica Neue", "Helvetica", Arial sans-serif;
        line-height: 1.5;
    }

    .containerbox { 
    	display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 10px;
    }
    
    h1 {
        font-size: 2.5em;
        line-height: 1.5;
    }
    
    h3 {
        font-size: 1.5em;
        font-weight: 600;
    }
    
    ul,
    ol {
        margin: 1em;
    }
    
    ul li {
        list-style: outside disc;
        padding: 0 0.5em 0;
    }
    
    ol li {
        list-style-type: decimal;
    }
    
    .flex {
        /* basic styling */
        width: 100%;
        height: auto;
        border: 1px solid #555;
        font: 14px Arial;
        /* flexbox setup */
        display: flex;
        min-height: 150px;
    }
    
    .flex > div[id] {
        flex: 1 1 auto;
        padding: 1em;
        width: 30px;
        /* To make the transition work nicely. (Transitions to/from
                        "width:auto" are buggy in Gecko and Webkit, at least.
                        See http://bugzil.la/731886 for more info.) */
        /* transition: width 0.7s ease-out; */
        border: 1px solid black;
    }
    
    .flex > div > div {
        padding: 1em;
        border: 1px solid black;
        flex: 1;
    }
    
    .flex > div:hover {
        /* width: 200px; */
    }
    
    .box {
        width: 19%;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
    }
    
    #mdc-problem {}
    
    #mdc-unique-value-proposition {}
    
    #mdc-customer-segment {}
    
    #mdc-cost-structure {}
    
    #mdc-revenue-stream {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/showdown/1.4.2/dist/showdown.min.js"></script>

<div class="containerbox">
	    <h1 id="mdc-canvas">LeanCanvas</h1>
	    <div class="flex">
	        <div id="mdc-problem">problem</div>
	        <div class="box">
	            <div id="mdc-solution">solution : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>
	            <div id="mdc-key-metrics">key metrics : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>
	        </div>
	        <div id="mdc-unique-value-proposition">unique-value-proposition</div>
	        <div class="box">
	            <div id="mdc-unfair-advantage">unfair advantage</div>
	            <div id="mdc-channels">channels</div>
	        </div>
	        <div id="mdc-customer-segment">customer-segment : </div>
	    </div>
	    <div class="flex">
	        <div id="mdc-cost-structure">cost-structure</div>
	        <div id="mdc-revenue-stream">revenue-stream</div>
	    </div>
	</div>