css-reference/property/min-height/index.html at master · TintGit/css-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
---
layout: single
property_name: min-height
---

<section id="min-height" class="property">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/box-model/">
          In collection: <strong>box-model</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/min-height/" data-property-name="min-height" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="min-height">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/min-height" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#min-height"><span>#</span>min-height</a>
    </h2>
    <div class="property-description">
      <p>Defines the minimum height of the element.</p>

    </div>

  </header>


    <style type="text/css">.min-height .block { max-width: 400px; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="这是属性的默认值">默认属性</code>


          <code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-height: 0;">min-height: 0;</code>
        </p>
        <div class="example-description">
          <p>The element has <strong>no minimum</strong> height.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div min-height " id="min-height-0"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
        </div>
      </aside>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-height: 200px;">min-height: 200px;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p>
<p>If the <em>minimum</em> height is <strong>larger</strong> than the element&#39;s <em>actual</em> height, the min height will be applied.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div min-height " id="min-height-200px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
        </div>
      </aside>
        <style type="text/css">#min-height-200px .block { min-height: 200px; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="点击复制" data-clipboard-text="min-height: 5px;">min-height: 5px;</code>
        </p>
        <div class="example-description">
          <p>If the <em>minimum</em> height is <strong>smaller</strong> than the element&#39;s <em>actual</em> height, the min height has <strong>no effect</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div min-height " id="min-height-5px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
        </div>
      </aside>
        <style type="text/css">#min-height-5px .block { min-height: 5px; }</style>
    </section>

</section>