css - как настроить изображение редактирования страницы

Question

Я пытаюсь превратить макет в страницу с помощью css, но я не уверен, есть ли какие-то трюки, которых я пропускаю из-за неопытности. Ниже изображено то, что я хочу. Я хочу, чтобы меню char занимало фиксированную ширину, но я хочу, чтобы меню редактирования растягивалось по мере изменения размера окна браузера.

Я, кажется, не быть в состоянии использовать проценты для определения параметров жидкости части, так как он будет либо переполнения под окном чата или сделать пустое пространство между ним.

Любая помощь будет принята с благодарностью!

Answer 1

*{margin:0; padding:0;} 
html,body{width:100%; height:100%;} 
.image{background:lightblue; height:100%; margin-right:200px;} 
.menu{width:200px; height:100%; background:salmon; position:absolute; top:0; right:0;} 

Demo