How to make an AppBar Component fill all div's width and 10% of its height?

问题

class MyStupidComponent extends React.Component {
    render() {
        return (
            <div style={{width: "100%"}}>
                <div style={{height: "10%"}}>
                    <AppBar title="MY APP" />
                </div>
            </div>
        );
    }
}

ReactDOM.render(<MyStupidComponent />, document.getElementById("stupid-app"));

Trying the jsx above AppBar component should fill all width and 10% of height from its div parent but it doesn't happen and it is shown a weird blank space on its top, left and right corner:

What is wrong with my component's style?

I am using the awesome Material UI's React.js Components

回答1:

Set margin: 0; to body in order to get rid of the white space above.

This problem is caused by the browser. Every browser has its own default user agent stylesheet, you can see it in your dev-tooling.

Like below

body - User Agent Stylesheet
   display: block;
   margin-top: 8px;
   margin-right: 8px;
   margin-bottom: 8px;
   margin-left: 8px;

Without any more details that explains your problem, such as any style in parent (#stupid-app)?

You can also prevent this problem occurred by using reset.css or normalize.css

回答2:

I solved this problem by removing padding space of div

div style ={{padding:'0px,0px,0px,0px'}} 

it will remove all the extra space of APPBar. It works for me.

来源：https://stackoverflow.com/questions/34716654/how-to-make-an-appbar-component-fill-all-divs-width-and-10-of-its-height