0

I have custom CSS for my SP collaboration site so that it has a fixed width and it's centered.

This code does that:

#s4-bodyContainer {
    width: 950px !important;
    height: 100% !important;
    min-height:100% !important;
    margin-left:auto;
    margin-right:auto;
}

I have a grey background so I added this code to give the main area a bit of padding (so the content isn't flush against the edge of the main area)

#s4-mainarea {
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    width: 920px !important; 
    height: 100%;
} 

It works great, but the height doesn't go 100%. It works for roughly 1000 pixels and then it seems like the main area just cuts off. How do I force the main area and it's padding to keep going?

Screens:

main area cut off 1

main area cut off 2

0

Well then.. I spent hours looking for the answer, decided to ask here after pulling all my hair out, and I found the answer by playing around with the CSS!

For anyone who googles this topic, rejoice for I have the answer and I'm going to actually share it!

ANSWER: Don't put padding in #s4-mainarea, put it in .s4-ca! Here's all my CSS:

#s4-bodyContainer {
width: 950px !important;
height: 100% !important;
min-height:100% !important;
margin-left:auto;
margin-right:auto; }

body #s4-ribbonrow {
background-color:#cccccc; }

body.v4master {
overflow: visible;
    background-color:#cccccc; }

.ms-cui-ribbonTopBars {
    width: 950px !important;
    margin-left:auto;
    margin-right:auto; }

.ms-cui-ribbonTopBars > div {
    border-bottom:1px solid transparent !important;
    width: 950px !important; }

body #s4-ribboncont {
padding:0px;
background: url("") repeat-x 0px -30px; }

#s4-mainarea {
background-color: white;
width: 950px !important; 
height: 100%; }

#s4-leftpanel {
display: none !important;
visibility: hidden !important; }

.s4-ca {
margin-left: 0px !important;
padding-left: 15px;
padding-right: 15px; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.