Dead-Simple Solutions

Nov 24, 2011

Cloud Foundry and Custom Domain

Posted Nov 24, 2011

Currently, Cloud Foundry (CF) doesn't support mapping of external URL's (See discussion). The workaround is to use a reverse proxy. For this job, I hosted it Google App Engine (GAE) and used BS2 GAE Reverse Proxy. Credits to yufeiwu for the free reverse proxy app.

Prerequisite:

- GAE account

- Also, please read the Python Tutorial for the development environment and pushing your app to Google server.

Steps:

Download the reverse proxy library (license: LGPL) in http://code.google.com/p/bs2grproxy/
Modify bs2grpconfig.py

set TARGET_HOST to your cloud foundry url
e.g. TARGET_HOST = "mvergel.cloudfoundry.com"

Modify app.yaml

set your registered application id

Push the app and make it live

I will continue to use this approach for my website until CF have a proper DNS support.

[UPDATE] Many are encountering a problem with the session using this method. There is a patch that fixes this issue. Thank you Marius Anton for the information.

Nov 23, 2011

Occupy the remaining height in CSS

Posted Nov 23, 2011

Today, I learned something new in CSS. The question is fairly simple: How do you occupy the rest of the height of a page? Let's say you have a header with a height of 200px (the blue area above), and for the bottom part, you want the height to be flexible and fill-in the rest (red part). Same idea can be applied to widths.

Solution:
Use of absolute positioning. Specify the top style to be the height of your header and set bottom to 0.

Sample:

<!DOCTYPE html>
<html>
<head>
<title>Auto-expand body height</title>
<style type="text/css">

body {
 height: 100%;
 margin: 0;
 position: relative;

}

html {
  height: 100%;
}

html * {

  box-sizing: border-box;
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body>
<div style="height: 200px; border: 1px solid blue;">
</div>
<div style="border: 1px solid red; position: absolute; top: 200px; bottom: 0; width: 100%;">
</div>
</body>
</html>

[Updated June, 2014] Or if you want a fixed footer too:

<!DOCTYPE html>
<html>
<head>
<title>Auto Expand</title>
<style type="text/css">

body {
 height: 100%;
 margin: 0;
 min-height: 450px;
 position: relative;
}

html {
  height: 100%;
}

html * { 
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body>
  <div style="height: 200px; border: 1px solid blue;">
  </div>
  <div style="border: 1px solid red; position: absolute; top: 200px; bottom: 100px; width: 100%;">
  </div>
<div style="height: 100px; border: 1px solid green; position: absolute; bottom: 0; width: 100%;">
  </div>
</body>
</html>