I have a table view and cell created in interface builder.
I've configured:
tableView.estimatedRowHeight = 140
tableView.rowHeight = UITableViewAutomaticDimension
It does work when I set up the cell in cellForRowAt right away:
let text = NSAttributedString(string: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")
cell.detail.attributedText = text
But how can we move the heavy lifting to a background task so we have a butter smooth scroll?
If I change the previous code to this:
DispatchQueue.global().async {
let text = NSAttributedString(string: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")
DispatchQueue.main.async {
cell.detail.attributedText = text
}
}
Then the self-sizing doesn't work anymore. I think I've tried every single method after updating the text, like setNeedsLayout.
Well it turned out that the most efficient way is to calculate/cache the attributed string and when that job done simply reload the cell !
Related
Goal: TextEditor with multiple columns. like on Apple Pages App.
Ex, when you set to 2 or 3 columns, the text is properly distributed:
Using vStacks here is not an option, as we would have multiple blocks of text, when the idea is to have one block that is dynamically distributed into columns.
Tried:
Using TextEditor, but there is no modifier to set columns
import SwiftUI
struct ContentViewView: View {
#State private var fullText: String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt culpa qui officia deserunt mollit anim est laborum."
var body: some View {
TextEditor(text: $fullText)
.foregroundColor(Color.gray)
.font(.custom("HelveticaNeue", size: 13))
}
}
Using Grid, but obviously all the text keeps on the first column.
import SwiftUI
struct IllustrationsView: View {
let inputText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
let columns = [
GridItem(.adaptive(minimum: 80)),
GridItem(.adaptive(minimum: 80)),
GridItem(.adaptive(minimum: 80)),
GridItem(.adaptive(minimum: 80))
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
Text(inputText)
}
.padding(.horizontal)
}
.frame(maxHeight: 300)
}
}
Question: How can we have a text that dynamically adjusts according to columns?
I'm new to Latex and am trying to make a book-style presentation. But I am quite confused by how Latex justifies text. I was told \begin and \end justified the text and it seemed to work until I add some \newline and then I got this :
We can clearly see the text is justified only on the lower text and not in the top.
Both are inside a \begin{raggedright} statement and did not used any other commands than \newline and \textit. The separation of the 2 text comes from a \scenechange commands that is defined as follow :
\newcommand{\scenechange}{
\par
\vspace{\baselineskip}
\par
\noindent}
%Creates a line break for a change of scene
As said, I am new to Latex and I have surely f-ed up something somewhere, but if someone has an explaination/solution, I'll take it ! Thanks anyway.
EDIT : As ask here is a code that reproduce the error I get :
%
% Body text font is Palatino!
%
% I copied the setting as is.
\documentclass[a5paper,pagesize,10pt,bibtotoc,pointlessnumbers,
normalheadings,DIV=9,twoside=false]{scrbook}
% twoside, openright
\KOMAoptions{DIV=last}
\usepackage{trajan}
\usepackage[english]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[sc]{mathpazo}
\linespread{1.05}
\usepackage{verbatim} % for comments
\usepackage{listings} % for comments
% Margin
\usepackage{geometry}
\geometry{hmargin=1.5cm,vmargin=3cm}
%-------------------------%
%------Document Code------%
%-------------------------%
\newcommand{\thought}[1]{\textit{#1}}
% !!! This two commands seem to create the problem
\newcommand{\scenechange}{
\par
\vspace{\baselineskip}
\par
\noindent}
%Creates a line break for a change of scene
\newcommand{\majorchange}{
\par
\vspace{\baselineskip}
\hfill
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hfill
\vspace{\baselineskip}
\newline
\noindent}
%creates a major line break, split by an asterisk for scene changes at the end of a page of where a sense of a major change is required.
%-------------------------%
%------Main Document------%
%-------------------------%
\title{Book}
\author{Svartorm}
\date{2022}
\begin{document}
\maketitle
\newpage
\section*{Testing Section}
\begin{raggedright}
Lorem ipsum dolor sit amet consectetur adipisicing elit.
\newline
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\newline
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
\newline
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\scenechange % I think the problem comes from here.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
\newline
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\newline
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
\newline
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\end{raggedright}
\end{document}
The reason you get the second half of your text justified is that you don't have an empty line between the end of your text and \end{raggedright}:
quasi aliquam eligendi, placeat qui corporis!
\end{raggedright}
For latex, this means that you switch back to justified text before the paragraph is finished and thus the whole paragraph gets justified. And because you are messing with \newline instead of having proper empty lines to delimit each paragraph, this means the whole text back until the scene change gets justified.
However instead of inserting an empty line, you shouldn't use raggedright as an environment in the first place. It kind of works by accident, but in reality \raggedright is a switch and not an environment. If you want only a part of your document to be ragged right, you can use a group around it (just make sure that again, there is an empty line before the group ends)
(and have a look at your log file, many of the class options you use are deprecated and should be replaced by the currently supported methods. Also using the geometry package with a koma script class is not necessarily such a good idea...)
%
% Body text font is Palatino!
%
% I copied the setting as is.
\documentclass[a5paper,pagesize,10pt,bibtotoc,pointlessnumbers,
normalheadings,DIV=9,twoside=false]{scrbook}
% twoside, openright
\KOMAoptions{DIV=last}
\usepackage{trajan}
\usepackage[english]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[sc]{mathpazo}
\linespread{1.05}
\usepackage{verbatim} % for comments
\usepackage{listings} % for comments
% Margin
\usepackage{geometry}
\geometry{hmargin=1.5cm,vmargin=3cm}
%-------------------------%
%------Document Code------%
%-------------------------%
\newcommand{\thought}[1]{\textit{#1}}
% !!! This two commands seem to create the problem
\newcommand{\scenechange}{
\par
\vspace{\baselineskip}
\par
\noindent}
%Creates a line break for a change of scene
\newcommand{\majorchange}{
\par
\vspace{\baselineskip}
\hfill
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hfill
\vspace{\baselineskip}
\newline
\noindent}
%creates a major line break, split by an asterisk for scene changes at the end of a page of where a sense of a major change is required.
%-------------------------%
%------Main Document------%
%-------------------------%
\title{Book}
\author{Svartorm}
\date{2022}
\begin{document}
\maketitle
\newpage
\section*{Testing Section}
\begingroup
\raggedright
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\scenechange % I think the problem comes from here.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\endgroup
\end{document}
Actual Behavior:
What is the issue? * When clicking on a contenteditable, the page jumps down.
What is the expected behavior? It should behave just as input fields, where the page scrolls to that element.
CodePen (or steps to reproduce the issue): *
CodePen Demo which shows your issue: http://codepen.io/pennybirman/pen/KaErKb
<body layout="column" ng-app="myApp" ng-cloak>
<md-content>
<div contenteditable="true" class="editables">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, magni omnis ad nihil voluptate harum fuga aut voluptatum incidunt ut libero ex, itaque eligendi repellendus, impedit. Possimus blanditiis ex nam.</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
</md-content>
</body>
Details: Has to be tested in a iOS mobile device. (Verified it in browserStack, and xCode with ios10).
Angular Versions: *
Angular Version: 1.5.7
Angular Material Version:1.1.0
Additional Information:
Browser Type: * Safari mobile.
Browser Version: *10.0
OS: *iOS 10.
Stack Traces: No errors, just UI behaviour.
Video:: https://youtu.be/6U6BtxQggJ8
Justin (Support Engineer from Ionic Team) said that it is not recommended to use contenteditable divs.
Source: https://github.com/ionic-team/ionic/issues/4162 (check latest comment)
I created a migration to add a new boolean value to my form, but when i send the form the hash value send a null value for my new field. I made the migration like i made the others boolean fiels. Can someone help me in this?
This is the result hash.
Parameters: {"utf8"=>"✓", "authenticity_token"=>"gMxerNn+jYk39ADC1EfIio6fqsfdcvtfnlkUOK7WNgmZrIyzRh2VsxBF9E9fAfT0W3oiHX2UYhYJ+MtfnHxtBg==", "campanha"=>{"titulo"=>"Teste App", "data_termino_venda"=>"22/12/2016 14:19", "data_limite_boleto"=>"22/12/2016 14:19", "suporte_versao_app"=>"1.0", "meio_pagamento"=>"iugu", "enviar_voucher"=>"1", "enviar_sms"=>"0", "enviar_push_notification"=>"1", "salvar_endereco"=>"0", "auto_accepts_solicitation"=>"", "nome_moeda"=>"Coins", "pedido_emitido_instrucoes"=>"<ul><li>1</li><li>d</li><li>sas</li><li>ads</li><li>dsa</li><li>sd</li><li>as</li><li>dsa</li><li>das</li><li>a</li></ul><p><br></p>", "titulo_voucher1"=>"juquinha", "descricao_voucher1"=>"<div><b>olea uhaeus hueau usahue a</b></div><div><b>euahush usah </b></div><div><b>euauseuhas</b></div><div><b><br></b></div><div><br></div><div><b>Ut sumo virtute vim, cum vide definitionem eu. Ex agam velit eam, nam antiopam mediocrem an, mei everti iudicabit voluptatibus ea. Audire aliquando ex quo, id has vidit nonumy gloriatur, tollit persius vituperata at vel. Mollis reprimique eu nec. Sea prima labores at, mei magna detracto in, nam deserunt philosophia te. Ex nec decore honestatis omittantur.</b></div>", "titulo_voucher2"=>"juquinha", "descricao_voucher2"=>"<h3 style=\"margin: 15px 0px; padding: 0px; font-weight: 700; font-size: 14px; color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif;\">Seção 1.10.32 de \"de Finibus Bonorum et Malorum\", escrita por Cícero em 45 AC</h3><p style=\"margin-bottom: 15px; padding: 0px; text-align: justify; color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif; font-size: 14px;\">\"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?\"</p>"}, "files"=>"", "commit"=>"Salvar", "id"=>"teste-app"}
This is my view field.
<div class="form-group">
<%= f.label 'AtivarSolicitação automática de ingresso' %><br>
<%= f.check_box :auto_accepts_solicitation, class: 'input-switch bootstrap-switch-primary' %>
ENGLISH:
There's must be something wrong with your checkbox input. Try some alternative syntax. If you're using simple_form and your attribute is boolean, only f.input :attribute should do the trick.
PORTUGUESE:
Aqui quem te escreve é um brasileiro!
Provavelmente é algo errado com o checkbox. Você está usando simple form?
Se sim, e o campo for booleano, basta fazer f.input :atributo. Será exibido como checkbox e acredito que o valor será enviado corretamente...
Hope it helps!
I found a weird issue with my fixed header under the following conditions:
iphone 6+, landscape mode
safari, at least two tabs opened
my page has a position: fixed header and a body and html with position: relative, height: 100%
After page loads and when scrolling down, all works good, the header is in place and web inspector shows it correctly:
But when you scroll up and pull the page down the screen and release, the header is still visible on the page, but actually it is shifted somewhere below the viewport (see that web inspector does not highlight it).
This fact results in all header elements being unaccessible: you cannot open the menu, click on the logo, or contact button.
The header goes back to normal when:
you scroll down (but breaks again when you scroll back up)
switch to another tab and back
or close other tabs
I tried changing DOM or/and CSS of the header and body, but nothing puts the header back to normal state.
Any thoughts on how it can be fixed?
I am sorry to be the messenger of bad news, but I have no idea what your actual problem is since you posted no actual code. However, I would guess that since your problem is position:fixed, the best way to fix it is by stopping using position:fixed as it seems to not be working for you. Here is how you can equally-smoothly emulate it using only absolute and relative positioning:
<html id="eHTML">
<style>
#eHTML { position: static }
#eBODY { position: relative; overflow:hidden }
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 }
#eBODY>div { position:absolute; left:0;bottom:0 }
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden}
#main {background-color:#ff8;width:100%;height:100%;overflow:auto}
</style>
<body id=eBODY>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,</p>
<p>sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</p>
<p>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<br /><br /><br /><br />
</div>
<div id="footer">
Some Random Fixed<br />
Content! Yay, it workz!
</div>
</body>
</html>