2

I have a problem with overflows on the y-axis. I'm looking for a solution to scale all content so it always will fit at 100% width and 100% height. Since I'll never know how much content will be put in, it has to scale to fit the active window. Hiding overflow is no option since all data need to be displayed.

I've tried using viewport settings, I've searched for both vanilla js and jquery solutions for this but haven't found a solution that fix this issue, I'm sure there is one?

Here is my current html - JSFiddle

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 1em;
}

* {
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}

.process {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.process div {
  display: table-cell;
  position: relative;
}

.process div:nth-child(even) {
  background-color: #edf0f6;
}

.process div:nth-child(odd) {
  background-color: #fafcff;
}
<body>

  <div id="wrapper">
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Curing</header>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Finishing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        aasd
      </div>
    </div>
  </div>

</body>

</html>

So as you can see, there is some text in there, and potentially it will be more, and it has to fit in your current window, no scrolling allowed.

So what I'm looking for is 100% height and 100% width, always scaling all content to fit window, no matter how much data, text size can be super small, that's fine, but always scale from huge windows to minimum ones.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
Björn Rutholm
  • 37
  • 7
  • Have a look here: http://stackoverflow.com/questions/24376897/fit-text-perfectly-inside-a-div-height-and-width-without-affecting-the-size-of – Gerard May 12 '17 at 12:56

2 Answers2

3

Flexbox and updated to use font scaler, have pasted in css after build but this mixin is how it's generated :-

@mixin font-scaler($min_width:400, $max_width: 800, $min_font:12, $max_font:24) {

        //Usage:-
        // @include font-scaler(768, 1200, 12, 24);

        @media (min-width: #{$min_width}px) and (max-width: #{$max_width}px) {
            font-size: calc(#{$min_font}px + (#{$max_font} - #{$min_font}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));

        }
    }


body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 1em;
}

* {
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (min-width: 320px) and (max-width: 1920px) {
    #wrapper {
      font-size: calc(9px + (20 - 9) * ((100vw - 320px) / (1920 - 320))); } }

.process {
  display: flex;
  width: 100%;
  height: 100%;
}

.process div {
  flex: 1 1 auto;
}

.process div:nth-child(even) {
  background-color: #edf0f6;
}

.process div:nth-child(odd) {
  background-color: #fafcff;
}
<body>

  <div id="wrapper">
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        <header>Idle</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Weighing</header>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
        <p>
          1009999999 <span class="date">2017-06-15</span>
          <span class="details">Additional data needed for the order, 2 rows maximum.</span>
        </p>
      </div>
      <div>
        <header>Curing</header>
      </div>
      <div>
        <header>Mixing</header>
      </div>
      <div>
        <header>Pressing</header>
      </div>
      <div>
        <header>Finishing</header>
      </div>
      <div>
        <header>Done</header>
      </div>
    </div>
    <div class="process">
      <div>
        aasd
      </div>
    </div>
  </div>

</body>

</html>
Joe Keene
  • 2,175
  • 21
  • 27
  • Is this a sass solution or how is it implemented? – Björn Rutholm May 12 '17 at 13:11
  • No you can use this `font-size: calc(9px + (20 - 9) * ((100vw - 320px) / (1920 - 320)));` directly if you like but easier with sass. vars looks like this `font-size: calc([min-font-size] + ([max-font-size] - [min-font-size]) * ((100vw - [min-browser-width]) / ([max-browser-width] - [min-browser-width])));` - also don't forget the media query – Joe Keene May 12 '17 at 13:15
  • A problem with this solution is that it removes the 100% height and 100% width, always covering the whole window. Or am I missing something? – Björn Rutholm May 12 '17 at 13:16
  • `#wrapper` is 100% width and height of window? - You have three rows, last is empty? – Joe Keene May 12 '17 at 13:17
  • Yes, I missed that the process divs now are all equally large in height, witch now gives me a new problem :P If they contain different amounts of content, they need to scale according to that. So if last div is just 1 line of text, it should be a lot smaller than the ones containing more content. – Björn Rutholm May 12 '17 at 13:21
  • I suppose you also want to ride a unicorn to work everyday? :p What you're after sounds like masonry - I'll let you google that. Anyways I answered your original question :) – Joe Keene May 12 '17 at 13:23
  • 1
    Haha I'll keep working on it, I'll have a look at masonry, thank you for your help! – Björn Rutholm May 12 '17 at 13:26
  • 1
    Those calcs are crazy, I'll take them over unicorns +1 ;) – zer00ne May 12 '17 at 13:29
1

I think using Viewport-percentage lengths is the best solution.

  • vw [unit] Equal to 1% of the width of the initial containing block.
  • vh [unit] Equal to 1% of the height of the initial containing block.
  • vi [unit] Equal to 1% of the size of the initial containing block in the direction of the root element’s inline axis.
  • vb [unit] Equal to 1% of the size of the initial containing block in the direction of the root element’s block axis.
  • vmin [unit] Equal to the smaller of vw or vh.
  • vmax [unit] Equal to the larger of vw or vh.

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

p {
  font-size: 2vw; /* here */
}

* {
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}

.process {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.process div {
  display: table-cell;
  position: relative;
}

.process div:nth-child(even) {
  background-color: #edf0f6;
}

.process div:nth-child(odd) {
  background-color: #fafcff;
}
<div id="wrapper">
  <div class="process">
    <div>
      <header>Idle</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Weighing</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Mixing</header>
    </div>
    <div>
      <header>Pressing</header>
    </div>
    <div>
      <header>Done</header>
    </div>
  </div>
  <div class="process">
    <div>
      <header>Idle</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="warning">1009999999</span> <span class="date warning">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Weighing</header>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        <span class="error">1009999999</span> <span class="date error">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
      <p>
        1009999999 <span class="date">2017-06-15</span>
        <span class="details">Additional data needed for the order, 2 rows maximum.</span>
      </p>
    </div>
    <div>
      <header>Curing</header>
    </div>
    <div>
      <header>Mixing</header>
    </div>
    <div>
      <header>Pressing</header>
    </div>
    <div>
      <header>Finishing</header>
    </div>
    <div>
      <header>Done</header>
    </div>
  </div>
  <div class="process">
    <div>
      aasd
    </div>
  </div>
</div>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58