Растяжка div до высоты родителя
Основываясь на описании в комментариях, я придумал это, необычно читаю в подписанных байтах, так как он делает флажок continue немного легче проверять: (не проверено)
static int ReadVLQInt32(this BinaryReader r)
{
sbyte b0 = r.ReadSByte();
// the first byte has 6 bits of the raw value
int shift = 6;
int raw = b0 & 0x3F;
// first continue flag is the second bit from the top, shift it into the sign
sbyte cont = (sbyte)(b0 << 1);
while (cont < 0)
{
sbyte b = r.ReadSByte();
// these bytes have 7 bits of the raw value
raw |= (b & 0x7F) << shift;
shift += 7;
// continue flag is already in the sign
cont = b;
}
return b0 < 0 ? -raw : raw;
}
Это может быть легко расширенный для чтения long, просто убедитесь, что вы используете b & 0x7FL, в противном случае это значение сдвигается как int, и бит будет сброшен.
2 ответа
Для дальнейшего использования, это также может быть достигнуто путем стилизации Layout и использования flexGrow, где это уместно.
import React from "react";
import { render } from "react-dom";
import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
const Style = createGlobalStyle`
body, html {
height: 100%;
background: green;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
`;
const FlexCol = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
`;
const Layout = ({ children }) => {
return (
<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
<Header>header</Header>
<FlexCol>{children}</FlexCol>
</div>
);
};
const Header = styled.div`
height: 50;
background: blue;
`;
const Home = () => {
return (
<div
style={{
height: "100%"
}}
>
<Feed />
</div>
);
};
const FeedContainer = styled.div`
display: flex;
flex: 1;
background: red;
height: 100%;
width: 100px;
`;
const Feed = () => <FeedContainer>something</FeedContainer>;
const App = () => {
return (
<Layout>
<Home />
</Layout>
);
};
render(
<ThemeProvider theme={{}}>
<React.Fragment>
<Style />
<App />
</React.Fragment>
</ThemeProvider>,
document.getElementById("root")
);
Это дает:
Чего не хватает в вашей настройке, так это высоты промежуточного контейнера между телом и макетом. Контейнер, в котором вы визуализируете ваше приложение реакции: #root.
Добавление 100% высоты устраняет проблему:
const Style = createGlobalStyle`
body, html {
height: 100%;
background: green;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
#root { //<-- this thingie
height: 100%;
}
`;
Вот обновленная песочница: https://codesandbox.io/s/xrw84wkw54