我正在尝试创建一个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>
我想要的行为，但我现在在哪里挣扎：
有人有实施的提示吗？
PS：如果没有javascript可能会很棒。但这不是一个停滞不前的问题。
答案 0 :(得分：1)
检查一下：
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>
答案 1 :(得分：0)
水平滚动是由你的填充引起的，你想要有一个填充但是要保持它内部，而不增加额外的宽度，你可以使用盒子大小：
body {
box-sizing: border-box;
}
相同的盒子重叠，你确实添加了填充，只需使用盒子大小，你就可以将它们的高度设置为50％，因此它完全适合。