0
Ich habe ein Problem mit Flex-Layout Ich fand here. Sein von this guy. Das Problem ist, dass die Fußzeile zusammen mit der Seite nach unten scrollt, anstatt am Ende des Inhalts oder am unteren Rand der Seite zu bleiben, wenn nicht genug Inhalt vorhanden ist. Was ich damit meine ist,Flexbox 3 Spaltenlayout mit Sticky Footer
Der Code ist für die Komponenten reagieren, aber es ist leicht zu verstehen.
Jede Hilfe sehr geschätzt.
//// All styles are in Layout component.
/////////// LAYOUT START ////////////////
class Layout extends React.Component {
constructor() {
super();
}
render() {
// STYLES START HERE
const styleLayout = {
siteWrapper: {
display: 'flex',
flexDirection: "column",
height: '100vh'
},
site: {
display: 'flex',
flexGrow: '1',
background: 'pink'
},
siteContent: {
flexGrow: '1',
paddingTop: '80px',
background: 'lightgreen',
},
rightColumn : {
width: '200px',
paddingTop: '80px',
background: 'lightblue'
},
leftColumn : {
order: '-1',
width: '200px',
paddingTop: '80px',
background: 'honeydew'
}
}
return (
<div style={styleLayout.siteWrapper}>
<Header />
<div style={styleLayout.site}>
<div style={styleLayout.siteContent}>
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
</div>
<div style={styleLayout.leftColumn}>
<LeftColumn />
</div>
<div style={styleLayout.rightColumn}>
<RightColumn />
</div>
</div>
<Footer />
</div>
);
}
}
//////////// COMPONENTS START
class RightColumn extends React.Component {
render() {
return (
<div >Right Column</div>
);
}
}
class LeftColumn extends React.Component {
render() {
return (
<div >Left dsargsrtdgfeadcsfdsColumn</div>
);
}
}
class Header extends React.Component {
constructor(props) {
super(props)
}
render() {
const styleHeader = {
background: 'olivedrab'
}
return (
<div style={styleHeader}>
<h2> Header</h2>
</div>
);
}
}
class Footer extends React.Component {
render() {
\t const styleFooter = {
\t \t backgroundColor: 'grey',
\t \t height: '100px',
}
return (
<footer style={styleFooter}>footer</footer>
);
}
}
/////////// COMPONENTS END ////////////////
ReactDOM.render(
<Layout />
\t
,document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>
Gott verdammt noch mal. Ich spiele mit der Höhe auf der Verpackung und dem Körper. Schade, dass ich es selbst nicht herausgefunden habe. Danke vielmals. Du hast mich gerettet. – yoK0